0

Tenho um formulário que cria uma lista de imagens selecionadas antes de enviar através de um input type='file'

No entanto como posso passar o Array JavaScript para o formulário e submeter ele ao clicar no action?

preciso resgatar o array enviado em php no próprio php

var nomess = [];

function handleFileSelect() {
    var output = document.getElementById("resultt");
    arquivos = $("#imagem").prop("files");
    var nomes = $.map(arquivos, function(val) { return val.name; });

    //new
    var filesStr = "";
    for (let i = 0; i < arquivos.length; i++) {
        var extensao = nomes[i].split('.').pop().toLowerCase();
        if(extensao == "doc" || extensao == "docx"){
            icone = "http://www.programari.com.br/assets/images/icons/word.png";
        }else if(extensao == "jpg" || extensao == "jpeg"){
            icone = "http://www.programari.com.br/assets/images/icons/jpg.png";
        }else if(extensao == "png"){
            icone = "http://www.programari.com.br/assets/images/icons/png.png";
        }else if(extensao == "xml"){
            icone = "http://www.programari.com.br/assets/images/icons/xml.png";
        }else if(extensao == "gif"){
            icone = "http://www.programari.com.br/assets/images/icons/gif.png";
        }else if(extensao == "pdf"){
            icone = "http://www.programari.com.br/assets/images/icons/pdf.png";
        }else if(extensao == "bmp"){
            icone = "http://www.programari.com.br/assets/images/icons/bmp.png";
        }else if(extensao == "txt"){
            icone = "http://www.programari.com.br/assets/images/icons/txt.png";
        }else if(extensao == "xlsx" || extensao == "xls"){
            icone = "http://www.programari.com.br/assets/images/icons/xls.png";
        }else{
            icone = "http://www.programari.com.br/assets/images/icons/file.png";
        }
        nomess.push(arquivos[i]);
        filesStr += "<li>" + arquivos[i].name + "<button onclick='removeLiy(this)' style='background-color:white; border:0'><i class='fas fa-trash' style='color:red; font-size: 24px; padding: 8px 0px 0px 3px;'></i></button><img src='"+icone+"' height='24' />" + "</li>";
    }

    console.log(nomess);

    document.getElementById("imagem").value = "";
    document.getElementById("resultt").innerHTML += filesStr;

}

function removeLiy(e) {
        nomess = nomess.filter(function(imagem) {
        return imagem.name !== e.parentNode.innerHTML.split("<button")[0];

        console.log(nomess);

    })
    e.parentNode.parentNode.removeChild(e.parentNode);
    console.log(nomess);

}

document.getElementById('imagem').addEventListener('change', handleFileSelect, true);
<form id="formExemplo" action="nova-acao/salvar'" method="post" enctype="multipart/form-data" data-toggle="validator" role="form">

    <div class="col-md-4 form-group">

        <input type="file" onchange="handleFileSelect" name="imagem" id="imagem" style="" multiple="multiple">

    </div>

</form>

4
  • Você quer apenas enviar os valores de input file para a página que recebe o PHP ou quer exatamente passar no js para enviar?
    – ElvisP
    Commented 17/02/2019 às 1:24
  • eu queria pegar o array js e de alguma forma criar ou povoar um input file, logo após quando eu clicar no enviar ele deveria enviar os outros campos e este com os arrays. estes arrays são imagens sem restrição de extensão... Commented 17/02/2019 às 1:31
  • @Eliseu B. você sabe como deve ser feito? Commented 17/02/2019 às 20:19
  • desculpe a demora, a solução abaixo atende sua necessidade, se funcionar por favor dê o voto de resposta aceita.
    – ElvisP
    Commented 18/02/2019 às 0:20

3 Respostas 3

2

Tratei aqui exclusivamente da tarefa de adicionar um novo input type="file" já "populado", como parece que você precisa.

A cada novo arquivo adicionado no input name="imagem", é realizado um clone do mesmo dentro do <form> e resetado o valor do input "original".

Você pode conferir rodando aqui: https://jsfiddle.net/emanuelpoletto/doc85uxe/18/

Dá para ocultar o novo input via CSS. Eu só não fiz isso ali para ajudar na didática da resposta. Assim, o comportamento está visível. Espero que ajude.

$('#imagem').on('change', function() {
  if ($(this).val()) {
    let form = $('#formExemplo'),
      newFile = $(this).clone(),
      newName = 'imagem' + form.find('[name="imagem"]').length;
    newFile.removeAttr('id')
      .attr('name', newName)
    //.css('display', 'none');
    $('#formExemplo').append(newFile);
    $(this).val('');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formExemplo" action="" method="post" enctype="multipart/form-data">
  <input type="file" name="imagem" id="imagem" multiple="multiple">
</form>

14
  • Ocultar os inputs do clone ok eu consigo tranquilo. Agora precisaria testar isso para pegar o arquivo para tratamento na outra página , ou seja enviar o arquivo Commented 17/02/2019 às 23:15
  • Sim, @RichardBarcelos Eu me ative a essa etapa do form + javascript porque foi o código que você compartilhou. Espero que consiga testar o envio dessa forma. Penso que o tratamento do POST lá no PHP seria um outro tópico. Mas se precisar de ajuda também posso tentar dar uma mão. Commented 17/02/2019 às 23:20
  • beleza amigo, agradeço. No incio deste poste eu mostro o código java que mostra o nome do anexo, coloquei um botão de deletar e ele deleta o array e as informações como peso do arquivo selecionado, você viu? Ali tbm eu deleto. naquele código minha ideia é passar esse array para o forme ou criar uma session algo que eu possa recuperar no php depois.. com um simples $rr= $_FILES['nomess']; Commented 17/02/2019 às 23:24
  • Eu vi o seu print abaixo (minha pontuação aqui só permite comentar nas minhas próprias perguntas/respostas por enquanto hehe) Se você disser que está tudo bem usar um input type="file" sem o atributo multiple para tratarmos 1 arquivo por vez, eu consigo elaborar mais essa resposta para resolver a sua demanda como um todo. Commented 17/02/2019 às 23:35
  • Se usarmos o multiple vc acha que não funciona? Commented 17/02/2019 às 23:37
0

inserir a descrição da imagem aqui

@emanuelpoletto Aqui eu mostro que o array esta com as informações do arquivo.. não?

1
  • quero clicar em incluir ações e enviar os anexos da lista Commented 17/02/2019 às 23:27
0

Os browsers não permitem manipular o FileList de um input[type=file]. Podemos manter a sua abordagem, gerando o array com os arquivos. Mas não dá para retornar o mesmo array posteriormente ao input[type=file], alterando ou mesmo mantendo intacta a lista de arquivos.

A solução é enviar esses arquivos via Ajax. O resto do form pode ser submetido normalmente ou por Ajax também, tanto faz.

Baseado no código da pergunta, elaborei essa resposta que faz precisamente isso:

  • capta a lista de arquivos a cada change do input;
  • envia a lista de arquivos via Ajax no submit do form;
  • submete o "resto" do form normalmente depois de ter subido os arquivos.

var form = document.getElementById('formExemplo'),
    formSubmit = false,
    files = [],
    filesSentOk = 0,
    filesSentError = 0;

document.getElementById('imagem').addEventListener('change', function(event) {
  let output = document.getElementById('result');

  for (let i = 0; i < this.files.length; i++) {
    let name = this.files[i].name,
        ext  = name.split('.').pop().toLowerCase(),
        icon = 'http://www.programari.com.br/assets/images/icons/';

    switch (ext) {
      case 'jpg'  :
      case 'png'  :
      case 'xml'  :
      case 'gif'  :
      case 'pdf'  :
      case 'bmp'  :
      case 'txt'  :
      case 'xls'  : icon += ext; break;
      case 'doc'  :
      case 'docx' : icon += 'word'; break;
      case 'jpeg' : icon += 'jpg'; break;
      case 'xlsx' : icon += 'xls'; break;
      default     : icon += 'file';
    }
    icon += '.png';

    files.push(this.files[i]);
    output.innerHTML += '<li>' + name + '<button onclick="removeLiy(this)" style="background-color:white; border:0"><i class="fas fa-trash" style="color:red; font-size: 24px; padding: 8px 0px 0px 3px;"></i></button><img src="' + icon + '" height="24" /></li>';
  }

  this.value = '';
});

function removeLiy(el) {
  let index = Array.from(el.parentNode.children).indexOf(el);

  files.splice(index, 1);
  el.parentNode.remove();
}

form.addEventListener('submit', function(event) {
  if (formSubmit) {
    return;
  }

  event.preventDefault();

  files.forEach(function(file) {
    sendFile(file);
  });

  var interval = setInterval(function() {
    if ((filesSentOk + filesSentError) >= files.length) {
      clearInterval(interval);
      if (filesSentError <= 0) {
        formSubmit = true;
        form.submit();
      } else {
        alert('Erro ao enviar arquivo(s). Confira o console log.');
      }
    }
  }, 500);

  return false;
});

function sendFile(file) {
  let formData = new FormData(),
      request = new XMLHttpRequest();

  request.onreadystatechange = function() {
    // if (this.readyState == 4 && this.status == 200) {
      let states = [
        'request not initialized',
        'server connection established',
        'request received',
        'processing request',
        'request finished and response is ready'
      ];
      console.log('File: ' + file.name + '; State: ' + this.readyState + ' (' + states[this.readyState] + '); Status: ' + this.status + ' (' + this.statusText + ')' );
      if (this.readyState == 4) {
        if (this.status == 200) {
          filesSentOk++;
        } else {
          filesSentError++;
        }
      }
      // console.log('Response: ' + this.responseText);
    // }
  };

  formData.set('imagem', file);
  request.open('POST', form.getAttribute('action'));
  request.send(formData);
};
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<form id="formExemplo" action="http://example.com" method="post" enctype="multipart/form-data">
    <div class="col-md-4 form-group">
        Input de texto para teste: <input type="text" name="campo_qualquer_para_teste" value="Lorem ipsum dolor sit amet">
        <br><br>
        <input type="file" name="imagem" id="imagem" multiple="multiple">
        <br><br>
        <input type="submit" value="Enviar">
    </div>
</form>
<ul id="result"></ul>

IMPORTANTE: não está contido aí algum tipo de validação, seja no front ou no back-end. Por exemplo, se o Ajax retornar que a requisição foi enviada com sucesso e obteve HTTP status 200 do server não significa necessariamente que o upload foi bem sucedido. O ideal é incrementar as devidas validações antes de rodar em produção :)

3
  • Legal depois incrementar algo visual que sinalize "loading" para o usuário ao clicar no submit para ele saber o que está acontecendo enquanto os files estão subindo. Dá até pra sinalizar os files de um em um, à medida em que vão subindo. O upload via Ajax está rodando assíncrono ali, então os files vão subir em paralelo e consequentemente mais rápido ;) Commented 20/02/2019 às 23:29
  • Com este formato eu envio os outros campos do form separadamente? neste caso eu gravo os anexos e depois os outros campos? Commented 24/02/2019 às 22:13
  • Exato. Nessa abordagem, no submit do form ele envia os arquivos (de um em um) e por último envia todo o resto do form, tudo em sequência, num único clique. Vc só tem que tratar isso no back-end. O número de requisições que o PHP vai receber depende da quantidade de arquivos adicionados ;) Commented 24/02/2019 às 22:29

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 .