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

   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序列化

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

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)

                }

    }