目录
文件上传
1）form表单提交上传（会刷新）
2）ajax上传
3）iframe
4)图片上传预览（思路保存文件的时候，把文件保存文件的路径反馈回，客户端直接访问图片地址）
原生ajax和ajax,这两个都依赖于FormData对象，但是底板浏览器不支持。
iframe都支持(大部份网站都采用这种方式，什么版本浏览器都支持。
时机：
如果发送的是文件-->iframe,jquery,(formdata),XMLHTTPReuqest(Formdata)
考虑浏览器版本兼容，推荐iframe方式。
一：ajax原生实现上传
#ajax原生实现上传 #urls.py url(r'^upload/$',views.upload), url(r'^upload_file/$',views.upload_file), #upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .upload{ display: inline-block;padding: 10px; background-color: brown; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 90; } .file{ 100px;height: 50px;opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; } </style> </head> <body> <div style="position: relative; 100px;height: 50px;"> <input class="file" type="file" id="fafafa" name="afafaf" /> <a class="upload">上传</a> </div> <input type="button" value="提交XHR" onclick="uploadXHR();"> <script> //使用原生ajax实现上传 function uploadXHR(){ //首先获取值 //$("#fafafa")[0]==document.getElementById("fafafa") //files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0， var file_obj=document.getElementById("fafafa").files[0] //这里file_obj是对象，send发送的是字符串，所以不能直接发送 var formdata=new FormData();//FormData表示是一个form表单 formdata.append("username","root");//key ,value formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象 var xhr= new XMLHttpRequest() xhr.open("POST","/upload_file/",true); //回调函数，当状态变化时触发 xhr.onreadystatechange=function(){ //4是表示所有数据接受完了 if (xhr.readyState==4){ //获取返回值 console.log(xhr.responseText) //返回的是字符串 //转对象 JSON.parse(xhr.responseText) } } //上传文件不需要设置请求头 xhr.send(formdata);//发送的数据只能是字符串 } </script> </body> </html> #views.py def upload_file(request): username=request.POST.get("username") file_obj=request.FILES.get("fafafa") print(username,file_obj) with open(file_obj.name,'wb') as f: for item in file_obj.chunks(): f.write(item) ret={"status":False,"data":request.POST.get("username")} return HttpResponse(json.dumps(ret))
二：ajax jquery实现上传
##ajax jquery实现上传 #upload.html <div style="position: relative; 100px;height: 50px;"> <input class="file" type="file" id="fafafa" name="afafaf" /> <a class="upload">上传</a> </div> <input type="button" value="提交jqury" onclick="uploadJquery();"> <script src="/static/jquery-1.12.4.js"></script> <script> //jqury实现上传 function uploadJquery(){ //首先获取值 //$("#fafafa")[0]==document.getElementById("fafafa") //files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0， var file_obj=document.getElementById("fafafa").files[0] //这里file_obj是对象，send发送的是字符串，所以不能直接发送 var formdata=new FormData();//FormData表示是一个form表单 formdata.append("username","root");//key ,value formdata.append("fafafa",file_obj);//可以加对象,可以被send发送 $.ajax({ url: '/upload_file/', type: 'POST', data: formdata, processData: false, // tell jQuery not to process the data上传文件要设置 contentType: false, // tell jQuery not to set contentType上传文件要设置 success:function(arg,a1,a2){ console.log(arg); console.log(a1); console.log(a2); } }) }
三：iframe实现上传
##iframe实现上传 <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1"> <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" /> <input type="submit" onclick="iframeSubmit();" value="Form提交"/> </form> <script> //使用iframe实现上传 function iframeSubmit(){ $("#ifm1").load( function(){ //因为iframe里面有document,所以获取下面的元素先用contains. var content=$('#ifm1').contents().find('body').text(); console.log(content); } )} <script> def upload_file(request): username=request.POST.get("username") file_obj=request.FILES.get("fafafa") print(username,file_obj) with open(file_obj.name,'wb') as f: for item in file_obj.chunks(): f.write(item) ret={"status":False,"data":request.POST.get("username")} return HttpResponse(json.dumps(ret))
四：上面3种完整示例
##上面3种完整示例 #urls.py url(r'^upload/$',views.upload), url(r'^upload_file/$',views.upload_file), #views.py def upload_file(request): username=request.POST.get("username") file_obj=request.FILES.get("fafafa") print(username,file_obj) with open(file_obj.name,'wb') as f: for item in file_obj.chunks():#一点一点上传 f.write(item) ret={"status":False,"data":request.POST.get("username")} return HttpResponse(json.dumps(ret)) #upload.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .upload{ display: inline-block;padding: 10px; background-color: brown; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 90; } .file{ 100px;height: 50px;opacity: 0; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 100; } </style> </head> <body> <div style="position: relative; 100px;height: 50px;"> <input class="file" type="file" id="fafafa" name="afafaf" /> <a class="upload">上传</a> </div> <input type="button" value="提交XHR" onclick="uploadXHR();"> <input type="button" value="提交jqury" onclick="uploadJquery();"> <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1"> <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" /> <input type="submit" onclick="iframeSubmit();" value="Form提交"/> </form> <script src="/static/jquery-1.12.4.js"></script> <script> //jqury实现上传 function uploadJquery(){ //首先获取值 //$("#fafafa")[0]==document.getElementById("fafafa") //files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0， var file_obj=document.getElementById("fafafa").files[0] //这里file_obj是对象，send发送的是字符串，所以不能直接发送 var formdata=new FormData();//FormData表示是一个form表单 formdata.append("username","root");//key ,value formdata.append("fafafa",file_obj);//可以加对象,可以被send发送 $.ajax({ url: '/upload_file/', type: 'POST', data: formdata, processData: false, // tell jQuery not to process the data上传文件要设置 contentType: false, // tell jQuery not to set contentType上传文件要设置 success:function(arg,a1,a2){ console.log(arg); console.log(a1); console.log(a2); } }) } //使用原生ajax实现上传 function uploadXHR(){ //首先获取值 //$("#fafafa")[0]==document.getElementById("fafafa") //files表示你要上传的文件,上传的file可能有多个，但是我们这里只有一个所以是0， var file_obj=document.getElementById("fafafa").files[0] //这里file_obj是对象，send发送的是字符串，所以不能直接发送 var formdata=new FormData();//FormData表示是一个form表单 formdata.append("username","root");//key ,value formdata.append("fafafa",file_obj);//可以加对象 //设置原生ajax对象 var xhr= new XMLHttpRequest() xhr.open("POST","/upload_file/",true); //回调函数，当状态变化时触发 xhr.onreadystatechange=function(){ //4是表示所有数据接受完了 if (xhr.readyState==4){ //获取返回值 console.log(xhr.responseText) //返回的是字符串 //转对象 JSON.parse(xhr.responseText) } } //上传文件不需要设置请求头 xhr.send(formdata);//发送的数据只能是字符串 } //使用iframe实现上传 function iframeSubmit(){ $("#ifm1").load( function(){ //因为iframe里面有document,所以获取下面的元素先用contains. var content=$('#ifm1').contents().find('body').text(); console.log(content); } )} </script> </body> </html>
五：预览图片功能实现
##图片预览 <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1"> <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" /> <input type="submit" onclick="iframeSubmit();" value="Form提交"/> </form> <!--用来图片预览显示--> <div id="preview"></div> //使用iframe实现上传 function iframeSubmit(){ $("#ifm1").load( function(){ //因为iframe里面有document,所以获取下面的元素先用contains. var content=$('#ifm1').contents().find('body').text(); var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空 var imgTag=document.createElement("img"); imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/" $("#preview").append(imgTag); } )} ##图片预览改进（不点提交，给input file绑定onchange()事件，一改变就提交表单） <form id="form1" action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1"> <iframe id="ifm1" name="ifm1" style="display: none;"></iframe> <input type="file" name="fafafa" onchange="ChangeFile();"/> </form> <!--用来图片预览显示--> <div id="preview"></div> <script> function ChangeFile(){ //先给iframe绑定load事件 $("#ifm1").load( function(){ //因为iframe里面有document,所以获取下面的元素先用contains. var content=$('#ifm1').contents().find('body').text(); var obj=JSON.parse(content); $("#preview").empty();//如果里面有标签先清空 var imgTag=document.createElement("img"); imgTag.src="/"+obj.data; //注意反馈回来路径前面没有"/" $("#preview").append(imgTag); } ) //改变事件提交表单 $("#form1").submit(); } </script>