3

Este script abaixo seleciona para UPLOAD apenas um arquivo. Fiz diversas pesquisas e não encontrei nada que pudesse implementar para que eu conseguisse selecionar múltiplos arquivos.

<script type="text/javascript" >
    $(function(){
        var btnUpload=$('#upload');
        var status=$('#status');
        new AjaxUpload(btnUpload, {
            // Arquivo que fará o upload
            action: 'upload-file.php',
            //Nome da caixa de entrada do arquivo
            name: 'uploadfile',
            onSubmit: function(file, ext){
                 if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ 
                    // verificar a extensão de arquivo válido
                    status.text('Somente JPG, PNG ou GIF são permitidas');
                    return false;
                }
                status.text('Enviando...');
            },
            onComplete: function(file, response){
                //Limpamos o status
                status.text('');
                //Adicionar arquivo carregado na lista
                if(response==="success"){
                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                } else{
                    $('<li></li>').appendTo('#files').text(file).addClass('error');
                }
            }
        });

    });
</script>

Alguém sabe me ajudar nesta questão?

5
  • Esse btnUpload=$('#upload') é o botão de submit do form?
    – Sergio
    Commented 30/12/2015 às 10:21
  • sim, isso mesmo! Commented 30/12/2015 às 10:25
  • O input file vc tem ai? Commented 30/12/2015 às 10:36
  • Pelo que sei a implementação deve estar neste trecho: new AjaxUpload(btnUpload, { // Arquivo que fará o upload action: 'upload-file.php', //Nome da caixa de entrada do arquivo name: 'uploadfile', multiple: 'true', Tentei colocar a opção: multiple: 'true'. Mas sem sucesso! Commented 30/12/2015 às 10:37
  • Olhe esse plugin:, talvez seja bem completo e pode adiantar teu trabalho.
    – durtto
    Commented 30/12/2015 às 10:42

1 Resposta 1

4

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

8
  • acredito que uma opção para realizar um envio unico é ter todos os input[type='file'] dentro de um form#formID e usar var formID = document.getElementById('formID'); new FormData(formID)... no mais o $.ajax usa por padrão o contentType application/x-www-form-urlencoded enquanto que para se enviar um FormData o content type deve ser o multipart/form-data, então acredito que deva setar processData: false e contentType: false, nas opções do $.ajax... no mais a sua resposta merece um +2. Commented 30/12/2015 às 11:21
  • @TobyMosque obrigado, juntei processData e contentType no objeto passado ao ajax.
    – Sergio
    Commented 30/12/2015 às 11:35
  • @Sergio fiz a implementação do terceiro código jsfiddle.net/6pj5ckra/3 que vc postou porém não funcionou. Teria como vc implementá-lo no código que tenho acima? Porque com certeza eu fiz de forma errada esta implementação. Commented 20/01/2016 às 14:26
  • @GladisonNeuzaPerosini pois há lógica errada aí. Queres enviar os ficheiros quando? há um botão para enviar ou assim que os ficheiros forem selecionados?
    – Sergio
    Commented 20/01/2016 às 15:43
  • @Sergio atualmente meu código funciona quando o arquivo é selecionado. Já que o código seleciona apenas um para cada envio. Gostaria de manter este estilo. Apenas implementar para que eu possa selecionar e enviar vários de uma única vez. Commented 20/01/2016 às 15:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .