Jquery HTML5文件上传：FormData应该附加什么

这篇文章看起来很有希望，但我不知道代码中的

blobFile

是什么？我在哪里可以得到这个变量

额外问题:

我假设

FormData

对象包含所有输入字段中的数据，包括文件输入。但情况似乎并非如此。否则，我们不需要将文件数据附加到

FormData

。有人能解释一下为什么

FormData

中不包括文件输入吗

另外，我使用Django后端，按照惯例，它可以访问

request.files

中上传的文件。如何将文件数据放入

request.FILES

而不是

request.POST

中

编辑 我刚刚发现我的

请求中没有任何内容。请将
和
表单数据
以空格式发布。不知道为什么。。以下是相关代码：

//html

<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
    <span class='file-name' id='file-name-1'>FILE 1</span>
    <input type="file" id='id_image'>
    <input class="browse-click" type="button" value="+"/>
    <input id="send" type="submit" value="change">
</form> 

{%csrf\u令牌%}
文件1

//js


//单击按钮时，文件浏览器将打开
$（'.browse click'）。打开（“click”，函数（）{
$（'#id_image'）。单击（）；
});
//在文件浏览器中选择文件时异步上载文件
$（'#id_image'）。在（'change'，函数（）{
var currentpath=window.location.pathname；
var formData=新的formData（$（'form'）[0]）；
append（'csrfmiddlewaretoken'，'{{csrf_token}}'）；
$.ajax({
url:currentpath，//用于处理数据的服务器脚本
键入：“POST”，
xhr:function（）{//自定义xhr
var myXhr=$.ajaxSettings.xhr（）；
if（myXhr.upload）{//检查upload属性是否存在
myXhr.upload.addEventListener（'progress'，progressHandlingFunction，false）；//用于处理上载的进度
}
返回myXhr；
},
数据：formData，
cache:false，
contentType:false，
processData:false
});
});
函数处理函数（e）{
if（如长度可计算）{
$（'progress'）.attr（{value:e.loaded，max:e.total}）；
}
}
数据对象可以使用表单元素实例化，也可以不使用表单元素实例化。

如果使用表单元素实例化，表单中的所有字段将自动添加到表单数据对象。

如果不是（您链接到的问题就是这种情况），则必须使用append方法手动将所有字段添加到表单数据中。

blobFile
很可能是一个，您也可以使用从文件输入中获取的。
数据对象可以使用表单元素实例化，也可以不使用表单元素实例化。

如果使用表单元素实例化，表单中的所有字段将自动添加到表单数据对象。

如果不是（您链接到的问题就是这种情况），则必须使用append方法手动将所有字段添加到表单数据中。

blobFile
很可能是一个，您也可以使用从文件输入中获得的s。
您能提供代码示例吗？我使用
var formData=newformdata（$（'form'）[0]），但仍无法在请求中获得文件上载。邮递不知道发生了什么wrong@Philip007文件中还有其他表格吗？还显示html表单和用于ajax的js。不，这不是唯一的表单。但它是html中的第一个表单。它不是
$（'form'）[0]
所指的吗？另外，我在“编辑”中发布了代码。@Philip007请尝试向表单中添加一个id，并特别选择它。还有
$（'#id_image'）。单击（）在IE中不起作用。感谢您指出。我将文件输入字段的id设置为
form1
，然后
var formData=new formData（$（“#form1”）。现在我根本没有收到任何xhr请求！你能提供代码示例吗？我使用
var formData=newformdata（$（'form'）[0]），但仍无法在请求中获得文件上载。邮递不知道发生了什么wrong@Philip007文件中还有其他表格吗？还显示html表单和用于ajax的js。不，这不是唯一的表单。但它是html中的第一个表单。它不是
$（'form'）[0]
所指的吗？另外，我在“编辑”中发布了代码。@Philip007请尝试向表单中添加一个id，并特别选择它。还有
$（'#id_image'）。单击（）在IE中不起作用。感谢您指出。我将文件输入字段的id设置为
form1
，然后
var formData=new formData（$（“#form1”）。现在我根本没有收到任何xhr请求！
<script>
    // when button is clicked, the file browser opens
    $('.browse-click').on("click" , function () {
        $('#id_image').click();
    });

    // upload file async when file is selected in file browser
    $('#id_image').on('change', function () {
        var currentpath = window.location.pathname;
        var formData = new FormData($('form')[0]);
        formData.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
            url: currentpath,  //server script to process data
            type: 'POST',
            xhr: function() {  // custom xhr
                var myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){ // check if upload property exists
                    myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // for handling the progress of the upload
                }
                return myXhr;
            },
            data: formData, 
            cache: false,
            contentType: false,
            processData: false
        });
    });

    function progressHandlingFunction(e){
        if(e.lengthComputable){
            $('progress').attr({value:e.loaded,max:e.total});
        }
    }
</script>