多个uploadify图片上传问题

Question

我在单页上使用多个uploadify实例.但问题是,当我提交表单时,表单会在上传所有文件之前提交.

我试过event.preventDefault(); 在图像上传之前阻止表单提交.但我没有得到解决方案.请建议我以某种方式阻止表单提交,直到所有uploadify文件上传为止.

这是我的功能

$("#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

我建议使用类来上传文件 - 会减少你的jQuery代码...例如......

<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" />

然后你的jQuery变成:

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

然后,当您初始化uploadify元素时,添加一种onComplete方法来跟踪已完成的上传:

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

然后创建一个变量来跟踪已完成的上传,然后在incrementUploadedCount功能检查中确认所有已完成,如果他们已提交表单

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