多個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圖片上傳問題

回答

相關問題