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.