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',
contentType: false,
processData: false,
data: (new FormData()).append('file', ficheiro),
https://jsfiddle.net/6pj5ckra/4/
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',
contentType: false,
processData: false,
data: data,
beforeSend: function(file, ext) {
// etc...
},
success: function(file, response) {
proximoAjax(); // <----
// etc...
}
});
}
proximoAjax();
https://jsfiddle.net/dq8Ldohr/5/
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',
contentType: false,
processData: false,
data: (new FormData()).append('file', ficheiro),
https://jsfiddle.net/6pj5ckra/3/
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',
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...
btnUpload=$('#upload')
é o botão de submit do form?