多个uploadify图片上传问题

时间:2012-02-15 13:18:04

标签: php jquery file-upload uploadify

我在单页面上使用多个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();
  });

3 个答案:

答案 0 :(得分:6)

我建议使用类来上传文件 - 这会减少你的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();
    }
}

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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