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>")
django 图片上传 前段+后端
原文地址：http://www.cnblogs.com/qieyu/p/7816748.html