Skip to main content
1 de 3
Sergio
  • 135,1mil
  • 16
  • 201
  • 294

Para fazer upload de multiplos ficheiros é preciso ter em conta alguns aspetos.

  • tens um input multiple para todos os ficheiro ou inputs diferentes para cada ficheiro?
  • queres fazer o upload em série ou concorrente (sequêncial)?

Múltiplos inputs, 1 ficheiro por input

No caso de serem múltiplos ficheiros mas cada um com o seu input nesse caso é simples, e só tens de criar um loop no teu código.

envios concorrentes:

var inputs = $('.inputs');
var status = $('#status');
inputs.get().forEach(function(input, i) {
    // aqui podes usar o "i" se só quiseres saber o numero
    // eu vou usar o nome do ficheiro
    var ficheiro = input.files[0];
    $.ajax({
        url: 'upload-file.php',
        data: (new FormData()).append('file', ficheiro),

https://jsfiddle.net/6pj5ckra/

Neste caso ele dispara em imediato pedidos paralelos (concorrentes). É a forma mais rápida.

envios em série, consecutivos::

var inputs = $('.inputs').get();
var status = $('#status');

function proximoAjax() {
    var proximo = inputs.shift();
    var data = (new FormData()).append('file', proximo.files[0])
    $.ajax({
        url: 'upload-file.php',
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

https://jsfiddle.net/dq8Ldohr/

Input unico, com atributo multiple, n ficheiros por input

envios concorrentes:

var input = $('#input');
var status = $('#status');
var ficheiros = input.get().map(function(input, i) {
    returninput.files[i];
});
ficheiros.forEach(function(ficheiro) {

    $.ajax({
        url: 'upload-file.php',
        data: (new FormData()).append('file', ficheiro),

https://jsfiddle.net/6pj5ckra/1/

envios em série, consecutivos:

var input = $('#input');
var status = $('#status');
var ficheiros = input.get().map(function(input, i) {
    returninput.files[i];
});
function proximoAjax() {
    var proximo = ficheiros.shift();
    var data = (new FormData()).append('file', proximo)
    $.ajax({
        url: 'upload-file.php',
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

https://jsfiddle.net/dq8Ldohr/2/


##Nota:

Esta resposta aponta as diferenças e possibilidades. Não testei exatamente o teu código pois não tenho acesso a ele. Desta maneira, usando o $.ajax do jQuery e não a tua abstração new AjaxUpload() acho que fica também mais fácil de manter, e util a outros que como eu não sabem o que essa new AjaxUpload() faz.

Sergio
  • 135,1mil
  • 16
  • 201
  • 294