多个uploadify图片上传问题

Question

I am using multiple uploadify instances on single page. But the problem is that when I submit the form,form gets submitted before the upload of all the files.

I tried event.preventDefault(); to prevent the form submission before the image upload. but I am not getting the solution. Please suggest me some way by which I can prevent the form submission until all the uploadify files gets uploaded.

Here is my function

$("#add_facility_form .form-submit").click(function(event){

        event.preventDefault();
      $('#gallary').uploadifyUpload();
      $('#brochures').uploadifyUpload();
      $('#award_logo').uploadifyUpload();
      $('#acc_logo').uploadifyUpload();
      $('#file_upload').uploadifyUpload();

       $("#add_facility_form").submit();
  });

Answer 1

I would suggest using classes for your file uploads - will reduce your jQuery code .. for example ...

<input type="file" id="file1" name="file1" class="uploadifyfile" />
<input type="file" id="file2" name="file2" class="uploadifyfile" />
<input type="file" id="file3" name="file3" class="uploadifyfile" />

Then your jQuery becomes :

$("#add_facility_form").submit( function(event){
    $('.uploadifyfile').uploadifyUpload(); // uses class instead of multiple IDs
    if (numFilesUploaded < $(".uploadifyQueueItem").length) { return false; }
});

Then when you initialise the uploadify elements add an onComplete method to keep a track of the completed uploads :

$(".uploadifyfile").each(function () {
    $(this).uploadify({
       'onComplete': function (event, queueId, fileObj, response, data) {
         incrementUploadedCount();
       }
    });
});

Then create a variable for keeping a track of the completed uploads then in the incrementUploadedCount function check that all have been complete, if they have submit the form

// keep track of uploaded count 
var numFilesUploaded = 0;

function incrementUploadedCount() {
    numFilesUploaded++; // increment complete count
    // check if complete count matches number of uploadify elements
    if (numFilesUploaded == $(".uploadifyQueueItem").length) {
         // submit your form
         $("#add_facility_form").submit();
    }
}