多个uploadify图片上传问题

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

来源

2012-02-15 Rohan Patil

我会建议使用类的文件上传 - 会降低你的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我THOD保持完成上传的轨道：

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

来源

2012-02-15 13:30:24 ManseUK

，你忘了提及的是，他现有的触发功能应该是一个'$（关键点“＃（）方法，它应该是'if（numFilesUploaded <$（“。uploadifyQueueItem”）。length）{return false; }'以防止表单提交，直到上传完成。但+1 – DaveRandom 2012-02-15 13:35:53

@DaveRandom谢谢 - 更新了代码...现在更有意义了吗？ – ManseUK 2012-02-15 13:44:09

确实如此。我刚刚意识到的一件事实际上是我不确定是否if（...）{return false; }'是必需的，或者你是否可以'返回false'; - 我不确定是否调用'.submit（）'触发提交处理程序。我会认为它*应该*，而我刚刚在Chrome中进行过测试，但它可能并非如此 - 为了以防万一，可能最好这样做。 – DaveRandom 2012-02-15 13:51:01

我认为您必须使用uploadify事件处理程序（例如complete或success），并且在调用所有这些事件处理程序时（上传成功），然后致电.sumbit。
我没有使用uploadify，但我确定必须有这样的事件。

来源

2012-02-15 13:30:30 Den

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

来源

2013-06-06 08:56:54 MindHacker

多个uploadify图片上传问题

回答

相关问题