摘要：
1、 以表单组件形式上传文件的缺点：页面将在后台刷新：前端：2.Ajax上传可以在不刷新页面的情况下实现上传。1.原生ajax上传使用XMLHttpRequest对象进行上传过程：生成XMLHttpRequest object object write data open（）start send send（）write object的回调函数xhr Onreadystatechange XMLHttpRequest object简介：
一、form组件形式上传文件
缺点：页面会刷新
后台：
前端：
二、ajax形式上传
能够实现页面不刷新上传
1、原生ajax上传，使用XMLHttpRequest对象来进行上传
流程:
生成XMLHttpRequest对象
对象编写数据open（）
开始发送send（）
编写对象的回调函数xhr.onreadystatechange
XMLHttpRequest对象介绍：
原生ajax实现：
get：不需要对格式进行说明
post提交方式：发送前需要对上传的格式进行说明
（1）上传数据：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
（2）上传文件：使用FormData（）对文件进行转换成对象
前端：
1 <div>ajax提交</div> 2 {# ajax提交#} 3 <div> 4 <input type="text" name="t1" > 5 <input type="file" name="file" id="file" > 6 <input type="button" value="原生ajax" onclick="put1()" > 7 <img src="" id="preview"> 8 <input type="button" value="jquery 提交"> 9 </div> 10 11 12 <script src="/static/jquery-1.12.4.js"></script> 13 <script> 14 function put1() { 15 var formdata= new FormData(); 16 formdata.append("k1","v1"); 17 formdata.append("file",document.getElementById("file").files[0]); 18 19 var xhr=new XMLHttpRequest(); 20 xhr.onreadystatechange=function(){ 21 if (xhr.readyState==4){ 22 res="/"+xhr.responseText; 23 $("#preview").attr("src",res); 24 {#alert(res)#} 25 } 26 }; 27 xhr.open("POST","/ajax_put/");29 xhr.send(formdata); 30 }
后台：
1 def ajax_put(request): 2 if request.method=="GET": 3 print(request.GET.get("a")) 4 return HttpResponse("test") 5 elif request.method=="POST": 6 file_obj=request.FILES.get("file") 7 file_path = os.path.join('static', file_obj.name) 8 f = open(file_path, "wb") 9 for chunk in file_obj.chunks(): 10 f.write(chunk) 11 f.close() 12 13 k1=request.POST.get("k1") 14 print(k1) 15 return HttpResponse(file_path)
2、JQuery的ajax提交
也是使用FormData（）对文件进行转换成对象
发送时注明：
contentType:false,
processData:false,
1 <script src="/static/jquery-1.12.4.js"></script> 2 <script> 3 function put2() { 4 var formdata= new FormData(); 5 formdata.append("k1","v1"); 6 formdata.append("file",$("#file")[0].files[0]); 7 8 $.ajax({ 9 url:"/ajax_put/", 10 method:"POST", 11 data:formdata, 12 contentType:false, 13 processData:false, 14 success:function (arg) { 15 alert(arg) 16 } 17 }) 18 } 19 </script>
3、伪造的ajax文件上传
iframe标签和form标签配合完成
1 function put3() { 2 $("#f1").submit(); 3 $("#ifr")[0].onload=loadFrom; 4 } 5 function loadFrom() { 6 var res=$("#ifr")[0].contentWindow.document.body.innerText; 7 var test='/'+res; 8 console.log(res) 9 console.log(test) 10 $("#preview").attr("src",test); 11 }
文件上传选择：
伪造ajax（iframe）>jQuery的ajax>原生ajax