Question

这篇文章看起来很有希望，但我无法弄清楚代码中的blobFile是什么？我在哪里可以得到这个变量？

How to upload a file using jQuery.ajax and FormData

额外问题：

我认为FormData对象包含所有输入字段包括文件输入中的数据。但似乎并非如此。否则，我们不需要将文件数据附加到FormData。任何人都可以解释为什么文件输入不包含在FormData？

中

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

修改我只是发现，我的request.POST和formData中的NOTHING是空的。无法弄清楚原因..以下是相关代码：

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

Answer 1

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

HTML5文件上传：应该附加到FormData的内容

1 个答案: