jqueryblueimp

jQuery:File+Data upload using Blueimp File Upload plugin on form submit


I am using Blueimp File Upload plugin to upload file. Let say I have following form:

<form id="myForm">
   <input type="text" name="n1" />
   <input type="text" name="n3" />
   <input type="text" name="n3" />
   <input type="file" name="files" id="file" style="display: none" multiple/>
   <button>Upload</button>
</form>

My job is

I want to upload files+data when use click Upload button. I have done auto file upload i.e. uploading file just after drag drop or selecting file.

But for this one I have no idea how to do.Can I have some simple example for this kind of cases?


Solution

  • You need something like this:

    var sendData= true;  
    $('#file').fileupload({
       dataType : 'json',
       autoUpload : false,
       add : function(e,data){
          $("#myForm button").on("click",function(){
              if(sendData){
                  data.formData = $("#myForm").serializeArray();              
                  sendData = false;
              }
    
              data.submit();
          });
       },
       done: function(e,data){
           sendData = true;
       }
    })
    

    here you can find more information about formData