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

Question

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?

Hi did you manage to solve this, I am submitting files and email address, but I am not sure how to get this email address from the PHP end. I used both $_REQUEST['email'] and $_POST['email'] but no success yet. — fanbondi
– fanbondi, Commented Dec 12, 2016 at 17:28

Dirty-flow · Accepted Answer · 2014-01-23 06:10:05Z

6

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

edited Jan 23, 2014 at 6:10

answered Jan 22, 2014 at 12:00

Dirty-flow

2,30011 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Manish Kumar Over a year ago

the problem is if i select 5 files it calls the given url 5 times

Dirty-flow Over a year ago

there is an ajax call for every file. So you want that you send the data only once, for example with the first file?

Manish Kumar Over a year ago

yes! I want to send all files in one shot.IS it possible?. Because the problem I am facing is If I have 5 attached file and if i submit the form then all field is submitted five times that is n1 n2... is received by server five times

Dirty-flow Over a year ago

@Manish I updated my answer with a workaround to send the data only in the first ajax call.

Manish Kumar Over a year ago

not working..Its still send 3 ajax call for 3 files and with each call its sending the form data i.e same text field data 3 times

|

Thor · Accepted Answer · 2015-06-01 05:56:33Z

Multi-file upload, with support for drag and drop and multibrowser support, is not possible without some tricks.

With the jquery file upload plugin, you can set autoUpload to false, collect the files being added or dropped, and then on form submit, you cancel the normal submit request. Instead you do a single ajax call which will contain all your files and the form content. When the ajax call returns you can redirect back to your view page etc.

var filesList = new Array();
$(function () {
    $('#fileupload').fileupload({
        autoUpload: false,
     }).on('fileuploadadd', function (e, data) {
        $.each(data.files, function (index, file) {
            filesList.push(data.files[index]);
        });
    });
}
$("#uploadform").submit(function(event) {
    if (filesList.length > 0) {
        event.preventDefault();
        $('#fileupload').fileupload('send', {files: filesList})
            .complete(function (result, textStatus, jqXHR) { 
                // window.location='back to view-page after submit?'
            });
        } else {
            // plain default submit
        }
    });
});
[...]
<form id="uploadform" action="..." method="POST" enctype="multipart/form-data">
    <input type="text" name="dummy" placeholder="some other input field">
    <input id="fileupload" type="file" name="files" multiple="multiple">
</form>

I have described a fully working solution with a spring mvc controller in detail here

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related