How to send to the back end an Array inputFiles via form?

Asked

Viewed 103 times

0

I have a form that besides the input file has other inputs like for example the input name.. select type...

In the input file I need to get more than one file, I got this with help from the people here in the stack... This even listing the selected files with the delete option, this very nice.

Now I need to get the input file files that are stored in the inputFiles Array. and pass it to php by clicking the submit button of the form.

How do I do this? , Currently when submitting the form it does not send the listing done with javascript

        var inputFiles = [];

function newInput(input) {
  var filesStr = "";

  for (let i = 0; i < input.files.length; i++) {
    inputFiles.push(input.files[i]);
    filesStr += "<li>" + input.files[i].name + " <button onclick='removeLi(this)'>Remover</button>" + "</li>";
  }

  document.getElementById("file-input").value = "";

  document.getElementById("dp-files").innerHTML += filesStr;
}

function removeLi(e) {
  inputFiles = inputFiles.filter(function(file) {
    return file.name !== e.parentNode.innerHTML.split(" <button")[0];
  })
  e.parentNode.parentNode.removeChild(e.parentNode);
}
    
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />





<form id='form' action='recebe.php' method='post' enctype='multipart/form-data'>

<div class="col-md-3 form-group">
  <input id='file-input' class='file-input' type='file' name='file' onchange="newInput(this)" multiple='multiple' />
</div>




                            
                            
  
  
  <div class="col-md-3 form-group">
                              
                                <select class="form-control" id="tipoacao" name="tipoacao"  required>
                                    <option value="">Selecione</option>
                                    <option value="0">opcao 1</option>
                                    <option value="1">Opcao 2</option> 
                                </select>
 </div>
 
 <div class="col-md-3 form-group">
 <input type="text"  name="nome" id="nome" class="form-control" placeholder="Seu nome" >
  </div>
 
 
 <div class="col-md-12 form-group"  style="padding-top:  0px; padding-left: none; padding-right: none;">
                            <label for="textNome" class="control-label" style=" color:white">Data Próxima ação</label><br/>
                                <button type="submit" class="btn btn-primary pull-left" style="color:white">Incluir Ação</button>
                        </div>

</form>


<br>

<hr>
Preciso peegar arquivos para enviar para outra página php só qeu antes listar eles, OK, já esta lsitando, agora preciso saber como passar a varaivel js que esta armazenando as imagens para o meu php ao clicar em <i><b>INCLUIR AÇÃO</i></b>. Alguem pode me ajudar?<br/>
No file php tento pegar a variavel em $imagem = $_FILES['file']; para fazer os tratamentos de upload
<hr><br>

<ul id="dp-files"></ul>
    

  • shows how the code is submit in javascript

  • @Wagner Son the Ubmit button is in shape.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.