一. 本地图片上传预览
1. 上传文件框隐藏到图片上面，点击图片相当于点上传文件框
<div class="login">
<div style="position: relative;height:80px; 80px; left:260px;top: -10px ">
<img id="previewImg" style="height:80px; 80px;" src="/static/image/default.png">
<input style="height: 80px; 80px; position: absolute; top:0;left: 0; opacity: 0" type="file">
{{ obj.avatar }}
</div>
</div>
2. Ajax 上传并预览
#获取到头像，通过原生Ajax传到后端，后端返回一个路径，重新给image 的src赋值路径
#问题: 用户上传完头像，但没有注册,会在硬盘里出现多余的头像 # 有些网站是先上传到临时目录,注册完再移动到新的目录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" /> <style> .login{ 600px; margin: 0 auto; padding: 20px; margin-top: 80px; } .f1{ position: absolute;height:80px; 80px;top:0;left: 0;opacity: 0; } </style> </head> <body> <div class="login"> <div style="position: relative;height:80px; 80px; left:260px;top: -10px "> <img id="previewImg" style="height:80px; 80px;" src="/static/image/default.png"> <input id="imgSelect" style="height: 80px; 80px; position: absolute; top:0;left: 0; opacity: 0" type="file"> {{ obj.avatar }} </div> </div> <script src="/static/jquery-3.2.1.js"></script> <script> $(function () { bindAvartar1(); }); function bindAvartar1() { $("#imgSelect").change(function () { //$(this)[0] #jquery变成DOM对象 //$(this)[0].files #获取上传当前文件的上传对象 //$(this)[0].files[0] #获取上传当前文件的上传对象的某个对象 var obj = $(this)[0].files[0]; console.log(obj); //ajax 发送后台获取头像路径 //img src 重新定义新的路径 var formdata = new FormData(); //创建一个对象 formdata.append("file",obj); var xhr = new XMLHttpRequest(); xhr.open("POST","/register/"); xhr.send(formdata); xhr.onreadystatechange = function () { if(xhr.readyState ==4){ var file_path = xhr.responseText; console.log(file_path); $("#previewImg").attr("src","/" + file_path) } }; }) } </script> </body> </html>
import os def register(request): if request.method == "GET": return render(request,"register.html") else: print(request.POST) print(request.FILES) file_obj = request.FILES.get("file") print(file_obj) file_path = os.path.join("static", file_obj.name) with open(file_path, "wb") as f: for chunk in file_obj.chunks(): f.write(chunk) return HttpResponse(file_path)
3. 本地上传并预览两种方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" /> <style> .login{ 600px; margin: 0 auto; padding: 20px; margin-top: 80px; } .f1{ position: absolute;height:80px; 80px;top:0;left: 0;opacity: 0; } </style> </head> <body> <div class="login"> <div style="position: relative;height:80px; 80px; left:260px;top: -10px "> <img id="previewImg" style="height:80px; 80px;" src="/static/image/default.png"> <input id="imgSelect" style="height: 80px; 80px; position: absolute; top:0;left: 0; opacity: 0" type="file"> {{ obj.avatar }} </div> </div> <script src="/static/jquery-3.2.1.js"></script> <script> $(function () { bindAvartar2(); }); function bindAvartar2() { $("#imgSelect").change(function () { var obj = $(this)[0].files[0]; console.log(obj); //将文件对象上传到浏览器 //IE10 以下不支持 var v = window.URL.createObjectURL(obj); $("#previewImg").attr("src",v); //不会自动释放内存 //当加载完图片后,释放内存 document.getElementById("previewImg").onload= function () { window.URL.revokeObjectURL(v); }; }) } function bindAvartar3() { $("#imgSelect").change(function () { var obj = $(this)[0].files[0]; console.log(obj); var reader = new FileReader(); reader.onload = function (e) { $("#previewImg").attr("src",this.result); }; reader.readAsDataURL(obj) }) } </script> </body> </html>
4.以后用法
#先用本地预览，如果不支持，使用第三种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.5-dist/css/bootstrap.css" /> <style> .login{ 600px; margin: 0 auto; padding: 20px; margin-top: 80px; } .f1{ position: absolute;height:80px; 80px;top:0;left: 0;opacity: 0; } </style> </head> <body> <div class="login"> <div style="position: relative;height:80px; 80px; left:260px;top: -10px "> <img id="previewImg" style="height:80px; 80px;" src="/static/image/default.png"> <input id="imgSelect" style="height: 80px; 80px; position: absolute; top:0;left: 0; opacity: 0" type="file"> </div> </div> <script src="/static/jquery-3.2.1.js"></script> <script> $(function(){ bindAvatar(); }); function bindAvatar(){ if(window.URL.createObjectURL){ bindAvatar2(); }else if(window.FileReader){ bindAvatar3() }else{ bindAvatar1(); } } function bindAvatar1() { $("#imgSelect").change(function () { //$(this)[0] #jquery变成DOM对象 //$(this)[0].files #获取上传当前文件的上传对象 //$(this)[0].files[0] #获取上传当前文件的上传对象的某个对象 var obj = $(this)[0].files[0]; console.log(obj); //ajax 发送后台获取头像路径 //img src 重新定义新的路径 var formdata = new FormData(); //创建一个对象 formdata.append("file",obj); var xhr = new XMLHttpRequest(); xhr.open("POST","/register/"); xhr.send(formdata); xhr.onreadystatechange = function () { if(xhr.readyState ==4){ var file_path = xhr.responseText; {# console.log(file_path);#} $("#previewImg").attr("src","/" + file_path) } }; }) } function bindAvatar2() { $("#imgSelect").change(function () { var obj = $(this)[0].files[0]; console.log(obj); //将文件对象上传到浏览器 //IE10 以下不支持 //不会自动释放内存 //当加载完图片后,释放内存 document.getElementById("previewImg").onload= function () { window.URL.revokeObjectURL(v); }; var v = window.URL.createObjectURL(obj); $("#previewImg").attr("src",v); }) } function bindAvatar3() { $("#imgSelect").change(function () { var obj = $(this)[0].files[0]; console.log(obj); var reader = new FileReader(); reader.onload = function (e) { $("#previewImg").attr("src",this.result); }; reader.readAsDataURL(obj) }) } </script> </body> </html>