Django提交文件的方式

以上传图片为列, 提交图片文件后能在不刷新页面的前提下显示图片

首先写出一个简单的提交文件的页面:

  <h>文件上传</h>
     选择文件<input type="file" name="fileName" id="img">
             <input type="button" value="提交" onclick="func1()">
             <input type="button" value="提交" onclick="func2()">

     <div id="imgs">
         {% for i in path %}
             <img style="width: 200px;height: 150px" src="\{{ i.filePath }}" alt="">
         {% endfor %}
     </div>

方法一:原生XMLHttpResponse对象+FormData

　　　onclick func1()事件函数中加入提交方式:

　　　　

   function func1() {
       var dic=new FormData();//创建FromData对象
       dic.append("fileName",document.getElementById("img").files[0]);//对象可以存储键值对,类似于python中的字典,这里的值就是文件的内容,注意.files[0],取第一个内容
       var xmlhttp = new XMLHttpRequest();//创建XMLHttpresponse对象
       xmlhttp.open('post',"/mmm/upload/",true);//提交方式和提交路径
       xmlhttp.send(dic);//发送数据
 　　　　//先去看后台处理....
       xmlhttp.onreadystatechange=function () {//回调函数
           if (xmlhttp.readyState==4){//判断返回成功
               var obj=JSON.parse(xmlhttp.responseText)//后台发会的是json字符串,反序列
 　　　　　　　　　　　　//这里是创建一个img标签,src=后台返回的路径,就可以在页面上直接显示图片了
                  if (obj.state){
                      var img=document.createElement("img")
                      img.src="/"+obj.path
                      document.getElementById("imgs").appendChild(img)
                  }
          }
      }
  }

　　后台:

　　

 def upload(req):
 　　#如果是GET方式,就将数据库中的文件的路径返回到页面
     if req.method=="GET":
         file=models.upLoadFile.objects.all().values("filePath")
         return render(req,"upload.html",{"path":file})
 　　#post方式处理
     else:
         obj=req.FILES.get("fileName")#获取前段发来的数据
         import os
         filePath=os.path.join("static",obj.name)#拼接路
 　　　　　#将前段发来的数据路径和名字存储到数据库
         models.upLoadFile.objects.create(**{
             "fileName":obj.name,
             "filePath":filePath
         })
 　　　　　#保存文件
         f = open(filePath,"wb")
         for i in obj.chunks():#发过来的文件对象是一块一块的,需要chunks()循环拼接
             f.write(i)
         f.close()
 　　　　　#返回给前段的数据,包括状态和路径
         ret={"state":True,"path":filePath}
 　　　　　import json
         return HttpResponse(json.dumps(ret))#由于是XMLHttpResponse,所以这里返回的是字符串,用json序列化

方法二:Ajax+FormData:

　　onclick func2()事件函数中加入提交方式:

 function func2() {
 　　　　//创建FormData
         var dic=new FormData();
         dic.append("fileName",document.getElementById("img").files[0]);
 　　　　//Ajax
         $.ajax({
             url:"/mmm/upload/",//路径
             type:"POST",//提交方式
             data:dic,//提交的数据,FormData就可以承载文件数据
             dataType:"JSON",//返回数据类型
             processData:false,//Ajax默认会设置请求头,设置数据,这里就是告诉Jquery不要去设置,数据才会简单的被获取
             contentType:false,
             success:function (ret) {//回调函数
                 if (ret.state){
                      var img=document.createElement("img")
                         img.src="/"+ret.path
                        $("#imgs").append(img)
                 }
             }
         })

     }

后台内容和方法一相同.

方式三:form表单+iframe伪造Ajax发送请求

　　因为FormData在低版本的浏览器不兼容

　　

　　写出form表单+iframe:

　　后台代码和方法一方法二相同.

<form action="/mmm/upload/" method="post" enctype="multipart/form-data" target="ifr"><!--enctype为不编码 ,target目标提交到iframe标签-->
<iframe id="ifr" name="ifr" onload="func3()"></iframe> <!--给iframe绑定一个onload事件,每次提交数据,iframe刷新完成执行-->
<input type="file" name="fafafa"> <input type="submit" value="提交">
</form>

　　onload函数代码:

function func3(){
        var ret=$("#ifr").contents().find("body").text()//iframe会在html里面嵌入html,并且获取到的数据保存在body里面,这里想要获取到iframe得到的数据就需要加上contents(),然后find到body
        ret=JSON.parse(ret)//反序列
　　　　　//同方法一和方法二,创建img标签然后加入src,再添加到页面中
        if (ret.state){
             var img=document.createElement("img")
             img.src="/"+ret.path
             $("#imgs").append(img)
                }
    }