Multiple File Upload actions for a single File Input PHP/JS

Question

I want to upload different images from different folders in a single file upload form submit. When I click the upload button for the second time before clicking the submit button, file input field get replace with the latest selections.

Is it possible to append the selections till the submit is clicked.

My JS code displays all the selected file. But submits only the last selections

Here is my HTML

<form name="status-form" id="status-form" method="post" enctype="multipart/form-data">
   <input type='file' name='file1[]' id="upload-image" multiple />
   <input type='hidden' name='file2' value="aaaaaaaa" />
   <div id="upload-img">
     <output id="list"></output>
   </div>
   <br/>  
   <button type="submit" name="submit" class="btn btn-info" id="status-btn">Send It!</button>
</form>

Here is my JS

var allImages = [];
if (window.FileReader) {
  document.getElementById('upload-image').addEventListener('change', handleFileSelect, false);
}

function handleFileSelect(evt) {
   var files = evt.target.files;

   for (var i = 0; i < files.length; i++) {
       var f = files[i];
       var reader = new FileReader();
       reader.onload = (function(f) {
           return function(e) {
               document.getElementById('list').innerHTML = document.getElementById('list').innerHTML + ['<img src="', e.target.result,'" title="', f.name, '" width="150" class="image-gap" />'].join('');
           };
       })(f);
     reader.readAsDataURL(f);
   }

   var formData = $('form').serializeArray(); 
   console.log(formData);

   $.ajax({
       type:'POST',
       url: 'temp.php',
       data:formData,
       success:function(data){
           //code here
       },
       error: function(data){
           //code here
       }
   });
   console.log(folder);

   $('#upload-img').addClass('image-div');
}

And my PHP is just a var_dump for the moment

if (isset($_POST['submit'])) {
   var_dump($_FILES['file1']);
   var_dump($_POST['file2']);
}

Answer 1

You can try this:

• Select file using browse field
• call a method (setImage()) on onchange of this browse field

and in setImage():

function setImage(){
 // Get the src value of browse field
 // Create a new hidden browse field with src value of above browse 
 // field
 // And set blank value of src of first one browse field
}

The idea is you select an image n times, the above method will create n hidden browse field in your html.

For example: If you select three images, then there will be four browse fields.

• 1 Shown to you
• Other three are hidden

Now press submit and in server side you will get 4 file fields one with empty file and other three with files.

Ignore empty one and upload other three images.