代码:
<!DOCTYPE html>
 <html>
 <head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="/static/jquery-1.12.4.js"></script>
     <style>
         .img{
             width: 300px;
             height: 300px;
         }
     </style>
 </head>
 <body>
     <input id="url" type="text">
     <iframe  id="my_frame" src="" style="display: none" name="my_frame"></iframe>




     <form id="fo" method="POST" action="/upload/" enctype="multipart/form-data">
         <input type="text" name="user" id="user"><br>
         <input type="file" name="img" id="img" οnchange="UploadFile3();"><br>
         <input type="submit" value="提交">
     </form>
     <div id="container">




     </div>


     <a οnclick="UploadFile();" style="color: red;cursor:pointer;">XMLRequest按钮上传</a>
     <a οnclick="UploadFile2();" style="color: red;cursor:pointer;">XMLRequest按钮上传</a><br>
     <a  οnclick="UploadFile3();" style="color: red;cursor:pointer;">测试Iframe</a>
 </body>
     <script>
         function UploadFile()
         {
                  var formDa=new FormData();
                 formDa.append("user",document.getElementById("user").value);


                 var file=document.getElementById("img").files[0];
                 formDa.append("img",file);
                 var xhr=new XMLHttpRequest();
                 xhr.onreadystatechange=function()
                 {
                     var data=xhr.responseText;
                     console.log(data);


                 };
             xhr.open("post","/upload/",true);
             xhr.send(formDa);
         }
         function UploadFile2(){
         var formD=new FormData();
             formD.append("user",$("#user").val());
             var fileobj=$("#img")[0].files[0];
             formD.append("imgg",fileobj);
             $.ajax({
                 url:"/upload/",
                 type:"POST",
                 data:formD,
                 processData:false,
                 contentType:false,
                 success: function (data) {
                     console.log(data);
                 }




             })




         }


         function UploadFile3()
         {
             $("#container").find("img").remove();
         document.getElementById("my_frame").οnlοad=callBack;






         document.getElementById("fo").target="my_frame";
         document.getElementById("fo").submit();
         }


         function callBack() {


                 var text=$("#my_frame").contents().find("body").text();
                 console.log(text);
                 var response=JSON.parse(text);
                 if(response.status){
                 var tag=document.createElement("img");
                 tag.src="/"+response.filepath;
                 tag.className="img";


                     $("#container").append($(tag));
                 }else{




                 }


         }


     </script>


 </html>
后端代码:
def upload(request):
     if request.method=="POST":
         ret={"status":True,"data":""}
         user=request.POST.get("user",None)
         img=request.FILES.get("img",None)
         from django.core.files.uploadedfile import TemporaryUploadedFile
         print(img._get_name(),type(img))
         print(img.size)
         f=open(os.path.join("static",img.name),"wb")
         ret["filepath"]=os.path.join("static",img.name)
         for chunck in img.chunks():
             f.write(chunck)
         f.close()
         return HttpResponse(json.dumps(ret))
     return  render(request,"upload.html")