5

Estou tentando realizar o upload de multiplos arquivos utilizando o ajax e me deparei com o seguinte problema, a princio quando eu realizava o upload com apenas um arquivo ele me retornava no php o array $_FILES com o nome do meu arquivo, assim eu poderia mover para a minha pasta temp.

Desta forma:

move_uploaded_file($_FILES['file']['tmp_name'], '../temp/' . $_FILES['file']['name']);

Depois que eu adaptei o meu JavaScript para enviar mais de um arquivo o array $_FILES vem vazia.

Exemplo:

var importadoresUrl = 'importador/exemplo.php?&acao=upload';

$('#upload').click(function() {
  $('#file_upload').click();
});

$("#file_upload").on("change", function(event) {
  files = event.target.files;
  var str = '',
    file = [];
  var formData = new FormData();

  $.each(files, function(key, val) {
    str += val.name + '\n';
    file[key] = $("#file_upload").prop('files')[key];
  });

  formData.append('file', file);
  $('#anexo').val(str + '\n');

  $.ajax({
    url: importadoresUrl,
    cache: false,
    contentType: false,
    processData: false,
    data: formData,
    type: 'post',
    success: function(data) {
      console.log(data);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<br>
<br>
<br>
<div class="container">
  <div class='row'>
    <div class='col-md-4'></div>
    <div class='col-md-4'></div>
    <div class='col-md-4'>
      <input type="file" name="file_upload" id="file_upload" class="hidden" accept=".csv" multiple>
      <button id="upload" class='btn btn-default pull-right'><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> Selecionar Arquivo</button>
    </div>
  </div>
  <label>Arquivo Selecionado:</label>
  <textarea id="anexo" disabled class='form-control' rows='6'></textarea>
</div>

Como fica em Postar:

Content-Disposition: form-data; name="file" [object File],[object File]

2
  • 1
    Relacionada ou possível duplicata: pt.stackoverflow.com/questions/106094/…
    – Leonardo
    Commented 25/01/2016 às 17:50
  • @Ivcs a resposta do Sergio é excelente mesmo, porém são exemplos de disparo de 1 ajax para cada arquivo, estava pensando em uma solução que as enviassem de uma só vez. Commented 25/01/2016 às 17:59

1 Resposta 1

2

Consegui enviar múltiplos arquivos pelo ajax!

O que eu fiz?

Em vez de enviar vários arquivos por um array chamado files criei para cada arquivo uma variável file0, file1 etc...

Depois eu li o array $_FILES que chegou com todos os indices!

No each do JavaScript adicione:

 formData.append('file' + key, $("#file_upload").prop('files')[key]);

Agora percorra os arquivos movendo para a pasta temporaria assim:

foreach ($_FILES as $value):
   move_uploaded_file($value['tmp_name'], '../temp/' . $value['name']);
endforeach;

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 .