jQuery 文件上传 POST 数据追加问题

Question

我在 Backbone 应用程序中使用 jQuery 文件上传器。

I am facing problem in POST data i.e when I upload data then only file which is selected will be added in POST object and one id which is initialized in initializeFileUpload function in formData and this initializeFileUpload function is load in OnLoad

this.ui.uploadAppFile 是 jquery 对象

initializeFileUpload: function() {
                var that = this,
                    file = "";
                var options = {
                    url: FSGlobals.baseURL + 'requests/req_bu_files/file',
                    maxFileSize: 5000000, // 5MB
                    formData: {
                      "Id": that.requestHeaderMod.get("id"),
                     },
                    add: function(e, data) {
                        file = (data && data.files[0] && data.files[0].name) || "";
                        that.manualPostData = data;
                        that.ui.filePlaceholder.val(file).change();
                    }
                };

                if ($('html').hasClass('ie9') || $('html').hasClass('lt-ie9')) {
                    options.forceIframeTransport = true;
                } else {
                    options.dataType = 'json';
                }

                this.ui.uploadAppFile.fileupload(options);
            }

我有一个按钮 提交，在提交时 我必须在 Post 对象中再添加两个 ID。

UploadAction: function() {
                var that = this;
                this.manualPostData.submit().
                done(function(data, textStatus, jqXHR) {

                    })
                    .fail(function(jqXHR, textStatus, errorThrown) {

                    });
               }

现在我尝试在 this.manualPostData 中找到 formData，但我在其中找不到 formData。

After Submit I see in Network it's showing formData object with file[] and Id which is declared in initializeFileUpload

Answer 1

根据文档，您可以使用方法 submit 向请求添加额外的值：

https://github.com/blueimp/jQuery-File-Upload/wiki/Options#submit

这是我创建的 fiddle 来演示如何覆盖该方法。

https://jsfiddle.net/LtzvL6s9/

submit: function(e, data) {
  console.log('submit',data, data.formData)
  data.formData = $.extend({}, {'other': 2}, data.formData);
}

我无法发送原始 ID，然后将其他数据附加到表单，但您可以在提交方法中添加您需要的所有内容。

希望这有助于解决您的问题。

Answer 2

我找到了一个解决方案：

Before submit pass your values to formData. But as you can see in question there is one more method i.e initializeFileUpload you have to initialize your file up-loader setting and all stuff. because if not then at submit time you dont get this.manualPostData As file up-loader object

UploadAction: function() {

            var that = this;
            this.manualPostData.formData = {
                "requestId": that.requestHeaderMod.get("id"),
                "status": false,
                "appId": this.ui.appListSelect.select2("val"),
                "appDimensionId": this.ui.appDimListSelect.select2("val"),
                "actionCode": this.ui.actionCodeSelect.select2("val")
            }
            this.manualPostData.submit()
           .done(function(data, textStatus, jqXHR) {
                   //
            })
            .fail(function(jqXHR, textStatus, errorThrown) {
                    //Fail

            });

并在 initializeFileUpload 中传递 Formdata={} 否则你必须使用

$.extend(OLd Object, New Object);

提交时