Skip to main content
Commonmark migration
Fonte Link

##Notas:

Notas:

#1

####1 EstaEsta 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.

####2

#2

####3

#3

##Notas:

####1 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.

####2

####3

Notas:

#1

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.

#2

#3

adicionou 802 caracteres ao conteúdo
Fonte Link
Sergio
  • 135,1mil
  • 16
  • 201
  • 294
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',
        contentType: false,
        processData: false,
        data: (new FormData()).append('file', ficheiro),

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

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',
        contentType: false,
        processData: false,
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

https://jsfiddle.net/dq8Ldohr/https://jsfiddle.net/dq8Ldohr/5/

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',
        contentType: false,
        processData: false,
        data: (new FormData()).append('file', ficheiro),

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

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',
        contentType: false,
        processData: false,
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

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

##Nota##Notas:

Esta####1 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.

####2

Quando uso o .get() é para converter um objeto jQuery numa Array nativa. Mais fácil de trabalhar e saber como usar o resultado a meu ver.

####3

A principal diferênça num input simples <input type="file" /> e um input que aceita múltiplos ficheiros <input type="file" multiple /> é (para além do atributo multiple) que a propriedade .files do elemento têm os nomes guardados. Ou seja, um input simples só tem .files[0] enquanto que um input multiple têm .files[0], .files[1], etc...

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/

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/

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/

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.

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',
        contentType: false,
        processData: false,
        data: (new FormData()).append('file', ficheiro),

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

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',
        contentType: false,
        processData: false,
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

https://jsfiddle.net/dq8Ldohr/5/

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',
        contentType: false,
        processData: false,
        data: (new FormData()).append('file', ficheiro),

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

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',
        contentType: false,
        processData: false,
        data: data,
        beforeSend: function(file, ext) {
            // etc...
        },
        success: function(file, response) {
            proximoAjax(); // <----
            // etc...
        }
    });
}
proximoAjax();

https://jsfiddle.net/dq8Ldohr/4/

##Notas:

####1 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.

####2

Quando uso o .get() é para converter um objeto jQuery numa Array nativa. Mais fácil de trabalhar e saber como usar o resultado a meu ver.

####3

A principal diferênça num input simples <input type="file" /> e um input que aceita múltiplos ficheiros <input type="file" multiple /> é (para além do atributo multiple) que a propriedade .files do elemento têm os nomes guardados. Ou seja, um input simples só tem .files[0] enquanto que um input multiple têm .files[0], .files[1], etc...

Fonte Link
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.