jQuery file upload POST data append issue

问题:

I am using jQuery file uploader in my Backbone application.

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 is jquery object

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);
            }

I have one button Submit and at submit time I have to add two more id's in Post Object.

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

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

                    });
               }

Now I try to find formData in this.manualPostData but I can't find formData in it.

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

回答1:

According to the documentation, you can use the method submit to add additional values to the request:

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

Here is a fiddle I created to demonstrate how the method can be overridden.

https://jsfiddle.net/LtzvL6s9/

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

I have not been able to send the original id and then append additional data to the form, but you can add everything you need on the submit method.

Hope this helps to solve your issue.

回答2:

I found One solution:

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

            });

And pass Formdata={} in initializeFileUpload other wise you have to use

$.extend(OLd Object, New Object);

at submit time