1

这篇文章看起来很有希望，但我不知道blobFile代码中有什么？我在哪里可以得到这个变量？

如何使用 jQuery.ajax 和 FormData 上传文件


额外问题：

我假设FormData对象包含所有输入字段中的数据，包括文件输入。但似乎并非如此。否则我们不需要将文件数据附加到FormData. 谁能解释为什么文件输入不包含在FormData?

另外，我使用 Django 后端，它按照惯例访问上传的request.FILES. 如何将文件数据放入request.FILES而不是request.POST使用$.ajax()？

编辑 我只是发现没有什么在我的request.POST和formData空的。无法弄清楚为什么..这是相关代码：

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

// js

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

1 回答 1

1

可以使用或不使用表单元素来实例化FormData数据对象。
如果使用表单元素对其进行实例化，则表单中的所有字段都将自动添加到表单数据对象中。
如果不是（在您链接到的问题中就是这种情况），那么您必须使用 append 方法手动将所有字段添加到表单数据中。
blobFile很可能是Blob，您也可以使用可以从文件输入中获取的File 。

于 2013-05-26T18:52:22.670 回答