複数のアップロード画像アップロードの問題

Question

1つのページで複数のアップロードインスタンスを使用しています。しかし、問題は、私がフォームを提出すると、フォームはすべてのファイルをアップロードする前に提出されるということです。

私はevent.preventDefault（）を試みました。イメージのアップロード前にフォームの提出を防止します。私は解決策を得ていない。すべてのアップロードファイルがアップロードされるまで、フォーム提出を防ぐ方法を教えてください。ここで

は私の機能は、私はあなたのファイルのアップロードのためのクラスを使用することをお勧めし

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

アップロードの要素を初期化すると、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(); 
    } 
} 

Answer 2

あなたはcompleteイベントやsuccessイベントなどのuploadifyイベントハンドラを扱う必要があり、それらのイベントがすべて呼び出されたとき（アップロードが成功したとき）は.sumbitを呼び出してください。
私はuploadifyで作業していませんが、そのようなイベントがあるはずです。

Answer 3

ManseUKの答えは完璧ですが、動的に追加された要素を（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"); 
});