文件上传的几种方式_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（）对文件进行转换成对象

　　前端：

    <div>ajax提交</div>
    {#    ajax提交#}
    <div>
    <input type="text" name="t1"  >
    <input type="file" name="file" id="file" >
    <input type="button" value="原生ajax" onclick="put1()" >
        <img src="" id="preview">
    <input type="button" value="jquery 提交">
    </div>


    <script src="/static/jquery-1.12.4.js"></script>
    <script>
        function put1() {
            var formdata= new FormData();
            formdata.append("k1","v1");
            formdata.append("file",document.getElementById("file").files[0]);

            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
              if (xhr.readyState==4){
                  res="/"+xhr.responseText;
                  $("#preview").attr("src",res);
                  {#alert(res)#}
              }
            };
            xhr.open("POST","/ajax_put/");29             xhr.send(formdata);
        }

后台：

def ajax_put(request):
    if request.method=="GET":
        print(request.GET.get("a"))
        return HttpResponse("test")
    elif request.method=="POST":
        file_obj=request.FILES.get("file")
        file_path = os.path.join('static', file_obj.name)
        f = open(file_path, "wb")
        for chunk in file_obj.chunks():
            f.write(chunk)
        f.close()

        k1=request.POST.get("k1")
        print(k1)
        return HttpResponse(file_path)

2、JQuery的ajax提交

也是使用FormData（）对文件进行转换成对象

发送时注明：

contentType:false,
processData:false,

<script src="/static/jquery-1.12.4.js"></script>
    <script>
     function put2() {
            var formdata= new FormData();
            formdata.append("k1","v1");
            formdata.append("file",$("#file")[0].files[0]);

            $.ajax({
                url:"/ajax_put/",
                method:"POST",
                data:formdata,
                contentType:false,
                processData:false,
                success:function (arg) {
                    alert(arg)
                }
            })
        }
    </script>

3、伪造的ajax文件上传

iframe标签和form标签配合完成

        function put3() {
            $("#f1").submit();
            $("#ifr")[0].onload=loadFrom;
        }
        function loadFrom() {
            var res=$("#ifr")[0].contentWindow.document.body.innerText;
            var test='/'+res;
            console.log(res)
            console.log(test)
            $("#preview").attr("src",test);
        }

 文件上传选择：

伪造ajax（iframe）>jQuery的ajax>原生ajax