django 图片上传 前段+后端

Posted 2020-10-14 窃语

1.前台
<form method="post" action="./writerApply" enctype="multipart/form-data">
<br>
<input type="text" name="realname" placeholder="真实姓名" class=" rowspace form-control " style="margin-bottom: 3px">
<input type="text" name="idnumber" placeholder="身份证号" class="form-control" style="margin-bottom: 3px">
<input type="number" name="telnumber" placeholder="电话号码" class="form-control" style="margin-bottom: 3px">
<input type="email" name="qq" placeholder="QQ号" class="form-control" style="margin-bottom: 3px">
<input type="text" name="biming" placeholder="笔名" class="form-control" style="margin-bottom: 3px">
<h4>上传身份证照片</h4><input type="file" name="idimage" id="uploading_id" onchange="xmTanUploadImg(this)" accept="image/*">
<img id="xmTanImg" width="300px" height="300px"/>
<h4>个人手持身份证照片</h4><input type="file" name="idperson" id="uploading_id_person" onchange="xmTanUploadImg(this)" accept="image/*">
<img id="xmTanImg1" width="300px" height="300px"/><br>
<textarea rows="5" cols="10" placeholder="申请说明" class="form-control" name="appexplain"></textarea>
{% csrf_token %}
<input type="submit" value="提交申请">
</form>
# 使页面可以添加显示的图片
<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if (typeof FileReader == ‘undefined‘) {
document.getElementById("xmTanDiv").Innerhtml = "<h1>当前浏览器不支持FileReader接口</h1>";
//使选择控件不可操作
document.getElementById("uploading_id").setAttribute("disabled", "disabled");
document.getElementById("uploading_id_person").setAttribute("disabled", "disabled");
}

//选择图片，马上预览
function xmTanUploadImg(obj) {
var file = obj.files[0];
console.log(obj);
console.log(file);
console.log("file.size = " + file.size); //file.size 单位为byte
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function (e) {
console.log("开始读取....");
}
reader.onprogress = function (e) {
console.log("正在读取中....");
}
reader.onabort = function (e) {
console.log("中断读取....");
}
reader.onerror = function (e) {
console.log("读取异常....");
}
reader.onload = function (e) {
console.log("成功读取....");
if (obj.id === "uploading_id") {
var img = document.getElementById("xmTanImg");
img.src = e.target.result;
}
else {
var img = document.getElementById("xmTanImg1");
img.src = e.target.result;
}
}
reader.readAsDataURL(file)
}
</script>

2.后台
def writerApply(request):
try:
loginbean = request.session[‘loginbean‘]
if loginbean==None:
return HttpResponse("<script>alert(‘登录过期,请重新登录‘);location.href=‘/‘;</script>")
if request.method != ‘POST‘:
return render(request, ‘home/writerApply.html‘)
else:
dict = request.POST.dict()
del dict[‘csrfmiddlewaretoken‘]
idimage = request.FILES.get(‘idimage‘)
if idimage == None:
return HttpResponse(‘必须上传身份证照片‘)
idperson = request.FILES.get(‘idperson‘)
if idperson == None:
return HttpResponse(‘必须上传手持身份证照片‘)
try:
#改图片名字另存为
idimagePath = "%s1%s"%(time.time(),idimage.name)
f = open(os.path.join("manager\\static\\imgs",idimagePath), ‘wb‘)
for chunk in idimage.chunks(chunk_size=1024):
f.write(chunk)
dict[‘idimage‘] = idimagePath

idpersonPath = "%s2%s" % (time.time(), idperson.name)
f = open(os.path.join("manager\\static\\imgs",idpersonPath), ‘wb‘)
for chunk in idperson.chunks(chunk_size=1024):
f.write(chunk)
dict[‘idperson‘] = idpersonPath
#入库操作
writer = Writers.objects.create(createtime=time.strftime(‘%Y-%m-%d %H:%M:%S‘, time.localtime(time.time())), **dict)# **dict必须放到最后
print(writer)
except Exception as e:
print(e)
finally:
f.close()
return HttpResponse(‘上传成功‘)
except Exception as err:
print(err)
return HttpResponse("<script>alert(‘网页错误‘);</script>")