Многократная проблема загрузки изображения - PullRequest
Новая
       16

Многократная проблема загрузки изображения

1 голос
/ 15 февраля 2012

Я использую несколько экземпляров загрузки на одной странице. Но проблема в том, что когда я отправляю форму, форма отправляется до загрузки всех файлов.

Я пробовал 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();
  });

Ответы [ 3 ]

6 голосов
/ 15 февраля 2012

Я бы предложил использовать классы для загрузки файлов - уменьшит ваш код 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, чтобы отслеживать завершенные загрузки: 

$(".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();
    }
}
0 голосов
/ 06 июня 2013

Ответ ManseUK идеален, но я не уверен, охватывает ли он элементы загрузки, которые добавляются динамически (через AJAX, после загрузки страницы). Я столкнулся с этой проблемой. Затем, читая функцию « live () » в API jQuery, я понял, что это можно сделать следующим образом: 

$(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");
});
0 голосов
/ 15 февраля 2012

Я думаю, что вы должны работать с обработчиками событий uploadify, такими как завершение или успех, и когда все они вызываются (загрузка была успешной), затем вызываете .sumbit.
Я не работал с uploadify, ноя уверен, что должны быть такие события.

...