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

Answer 2

我认为您必须使用uploadify事件处理程序，例如完成或成功，并且当所有这些都被调用（上传成功）时，请调用.sumbit。
我没有使用uploadify，但我确信必定会有这样的事件。

Answer 3

ManseUK的答案是完美的，但我不确定它是否涵盖了动态添加的uploadify元素（在页面加载后通过AJAX）。我遇到了这个问题。然后在阅读jQuery API上的“live()”函数时，我意识到可以这样做：

$(document).ready(function(){
    $('.upload_child_photograph').live('uploadifyEvent', function(){
        var child_id = $(this).attr('id').replace('upload_child_photograph_', "");

        $('#upload_child_photograph_' + child_id).uploadify({
            'auto'     : false,
            'swf'      : 'uploadify.swf',
            'uploader' : 'uploadify.php', 
            'uploadLimit' : 10, 
            'multi': true,
            'fileSizeLimit' : 0
        });
    });

    $(".upload_child_photograph").trigger("uploadifyEvent");
});

多个uploadify图片上传问题

3 个答案: