ajax 文件上传

在html中

<h3>ajax的文件上传</h3>


图片<input type="file" id="file" name="img">
<input type="submit" id="ajax-submit" value="ajax-上传">


{#<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>#}
<script src="/static/js/jquery-3.3.js"></script>
<script src="/static/js/ajax_setup.js"></script>   相当于给请求头加了一个csrftoken的值,然后通过中间件做校验
<script>
    // 注意的是页面中没有用到form表单，那么怎么提交数据呢，
    // 答案是用FormData来模拟表单中的<input type="file" id="file">

    $("#ajax-submit").click(function () {
        var form_obj = new FormData();  //文件上传 实例化一个空的FormData对象

        // 发ajax请求不需要csrf  ????  是因为上面引入了官方文档 所有不需要再写csrftoken了
        {#form_obj.append("csrfmiddlewaretoken",csrf); //给当前的FormData添加一个键值对#}

        //form_obj.append添加的键值对的名字***** 以这种形式添加的数据类型就相当于form表单中的 enctype="multipart/form-data" 所以processData不需要再做处理
        form_obj.append("img", $("[name='img']")[0].files[0]);  //转成dom对象之后,获取里面的单个文件
        {#form_obj.append("img",$("[name='img']")[0]// 把jq对象转成dom对象#}
        {#form_obj.append("img",$("[name='img']")[0].files //files表示获取里面的多个文件#}

        $.ajax({
            url: "/file_upload/",
            type: "post",

            // ajax 文件上传的必备参数
            processData: false,//不处理数据  不写的话会做urlencode处理
            contentType: false,//不设置内容类型
            data: form_obj,//发送一个FormData对象

            success: function (response) {
                alert(response)
            }

        })

    });


</script>

views视图中

def file_upload(request):
    if request.is_ajax(): #发 ajax请求
        file_obj=request.FILES.get("img")
        #拿html页面里给的form_obj.append("img", $("[name='img']")[0].files[0])里面的key值 img
        

　　　　 print(file_obj)#是个文件对象
        file_name=file_obj.name
        path=os.path.join(settings.BASE_DIR,"media","img",file_name)

        with open(path,"wb") as f:
            for line in file_obj.chunks():   #大文件用chunks方法读
                f.write(line)#写入文件
        return HttpResponse("上传成功")

    return render(request,"file_upload.html")