文件上传的几种方式_django

一、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

posted on 2020-07-29 20:12  陈小赞  阅读(467)  评论(0)  编辑  收藏  举报

导航