Javascript, jQuery, mehrere AJAX-Anfragen zur gleichen Zeit

function makeCall(file, handlerFile, sendMethod, formData) {
    //console.log(instance.files);

    $.ajax({
        url: handlerFile,
        type: sendMethod,
        xhr: function() {  //Custom XMLHttpRequest
            var xhr = $.ajaxSettings.xhr();

            if(xhr.upload) { //Check if upload property exists
                xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); //For handling the progress of the upload
                //xhr.upload.addEventListener('loadend', successHandler.bind(xhr));
            }

            //console.log(xhr);

            return xhr;
        },
        beforeSend: beforeSendHandler.bind(file),
        success: completeHandler.bind(file),
        //error: errorHandler,
        data: formData, //Form data
        dataType: 'json',
        cache: true,
        //async: false,
        contentType: false,
        processData: false
    });

}



$(".afu-input").on('change', function() {
        var i = 0;
        var length = this.files.length;
        var files = this.files;

        var calling = setInterval(function() {
            var file = files[i];
            console.log(file);

            uid  = generateUniqueId();
            file.id = uid;

            var formData = null;
            formData = new FormData();

            formData.append(i, file);
            formData.append(i, [uid]);

            makeCall(file, handlerFile, sendMethod, formData);

            i++;

            if (i >= length) {
                clearInterval(calling);
            }
        }, 2000); //Delay is for testing. Normaly there is no delay
}

Ich versuche zum hochladen von Datei eins nach dem anderen. Aber das problem ist, dass ajax-Anfrage senden richtig, aber immer nur einen(ersten) Daten zurückgeben.

Mein Ziel ist es, ein Skript erstellen, die uploads von Bildern(und später auch andere Dateien) auf input[type=file] ändern. Ich habe versucht, mehrere Dateien hochladen, die mit einer Anfrage, aber progress-Ereignis registrieren, Sie als ein. Ich hatte die Idee zu Segment(chunk) Dateien in Stücke ant zu senden, aber diese Variante scheint einfacher(nur brauchen, um es zu arbeiten, dann kann ich es verbessern). Danke.

  • Gibt es einen Grund für die 2 Sekunden Verzögerung zwischen den uploads?
  • Nop, nur zum testen, ich war auf der Suche nach problem und Hinzugefügt 2s Verzögerung. Gestern war ich googeln eine Menge, und fand, dass es getan werden kann, mit der Latenten in jQuery, ich werde es bald testen.
InformationsquelleAutor minus1 | 2013-10-24
  1. 5

    Es ist einfach zu machen, mit jQuery.wenn();

    Ajax-Aufrufe können eine beliebige Zahl. So müssen Sie es mit apply(); und erstellen Sie ein array von ajax-Aufrufe. Jetzt code sieht wie folgt aus:

    function makeCall(file, formData) {
    return $.ajax({ //It's necessary to return ajax call 
       url: 'handler.php',
       type: 'POST',
       xhr: function() { //Creating custom XHR to register progress event(If you know better solution - please post ir)
           var xhr = $.ajaxSettings.xhr();

           if (xhr.upload) { //Check if upload property exists
               xhr.upload.addEventListener('progress', progressHandlingFunction.bind(file)); //Registering progress event
           }

           return xhr;
       },
       //Events handlers
       beforeSend: beforeSendHandler.bind(file),
       success: completeHandler,
       data: formData,
       dataType: 'json',
       cache: true,
       contentType: false,
       proccessData: false
    });
}

$('.afu-input').on('change', function() {
    var files = this.files;
    var calls = [];

    $.each(files, function(i, file) {
        uid = generateUniqueId();
        file.id = uid;

        var formData = new formData();

        formData.append(0, file); //Just easier to set index to 0 cause for every file returning new obejct, so is no point to set more indexes

        calls.push(makeCall(file, formData)); //And finally pushing calls to array
    });

    //Using jQuery.when
    //Cause I don't know how many calls will be I'm using "apply" so I can add array instead of one by one calls
    $.when.apply($, calls); //Exactly I don't know why need "$"
}

function beforeSendHandler() {
    console.log(this);
}

function completeHandler(data) {
    console.log(data);
}

function progressHandlingFunction(e) {
    console.log(e);
    console.log(this);
}
    • Hooow, dieses Skript ist einfach genial
    InformationsquelleAutor minus1
Schreibe einen Kommentar