Проблем с многократно качване на изображения

Използвам множество екземпляри за качване на една страница. Но проблемът е, че когато изпратя формуляра, той се изпраща преди качването на всички файлове.

Опитах 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();
  });

php jquery file-upload uploadify
person Rohan Patil    schedule 15.02.2012    source източник

Отговори (3)


arrow_upward
6
arrow_downward

Бих предложил да използвате класове за вашите качвания на файлове - това ще намали вашия 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();
    }
}
person Manse    schedule 15.02.2012
comment
Ключов момент, който сте забравили да споменете, е, че неговата съществуваща тригерна функция трябва да бъде $('#form-id').submit() манипулатор и трябва if (numFilesUploaded < $(".uploadifyQueueItem").length) { return false; } да предотвратява изпращането на формуляр, докато качванията не приключат. Но +1 - person DaveRandom; 15.02.2012
comment
@DaveRandom Благодаря - актуализирах кода ... има ли повече смисъл сега? - person Manse; 15.02.2012
comment
Наистина е така. Едно нещо, което току-що разбрах всъщност е, че не съм сигурен дали това if (...) { return false; } е задължително или можете просто return false; - не съм сигурен дали извикването на .submit() задейства манипулатора за изпращане или не. Бих си помислил, че трябва и току-що тествах в Chrome и го прави, но може да не е така навсякъде - вероятно е най-добре да го сложа за всеки случай. - person DaveRandom; 15.02.2012
comment
@DaveRandom Просто си мислех точно същото нещо.... ‹strike›ще тествам това някъде другаде - първоначалните ми мисли са, че submit() ще задейства манипулатора за изпращане‹/strike› - person Manse; 15.02.2012
comment
Благодаря. Вашият отговор ми помогна много. - person Rohan Patil; 16.02.2012

arrow_upward
0
arrow_downward

Мисля, че трябва да работите с манипулатори на събития за качване, като пълно или успешно, и когато всички те бъдат извикани (качването беше успешно), тогава извикайте .sumbit.
Не съм работил с качване, но съм сигурен, че има трябва да има такива събития.

person Den    schedule 15.02.2012

arrow_upward
0
arrow_downward

Отговорът на ManseUK е перфектен, но не съм сигурен дали обхваща елементи за качване, които се добавят динамично (чрез AJAX, след като страницата е заредена). Сблъсках се с този проблем. След това, докато четях функцията "live()" на jQuery API, разбрах, че може да се направи това начин:

$(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");
});
person MindHacker    schedule 06.06.2013