Несколько действий по загрузке файлов для одного файла ввода PHP/JS

Question

Я хочу загрузить разные изображения из разных папок в одной форме отправки файла. Когда я нажимаю кнопку загрузки во второй раз, прежде чем нажать кнопку "Отправить", поле ввода файла заменяется последними вариантами выбора.

Можно ли добавить выбранные элементы, пока не будет нажата кнопка "Отправить"?

Мой код JS отображает все выбранные файлы. Но подает только последние выборы

Вот мой 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>

Вот мой 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');
}

И мой PHP на данный момент является просто var_dump

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

Answer 1

Вы можете попробовать это:

• Выберите файл, используя поле обзора
• вызвать метод (setImage()) при изменении этого поля просмотра

и в 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
}

Идея состоит в том, что вы выбираете изображение n раз, вышеописанный метод создаст n скрытое поле просмотра в вашем html.

Например: если вы выберите три изображения, тогда будет четыре поля просмотра.

• 1 показано вам
• Другие три скрыты

Теперь нажмите "Отправить", и на стороне сервера вы получите 4 файловых поля: одно с пустым файлом, а три других с файлами.

Не обращайте внимания на пустое и загрузите остальные три изображения.

Answer 2

С подсказкой Рахула я смог заставить ее работать. Вот ответ

Файл JS

var uploadImage = 0;

$( document ).ready(function() {
    uploadImage = Math.floor(Date.now() / 1000);
});

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('');
                $('<input>').attr({
                    type: 'hidden',
                    id: uploadImage++,
                    name: uploadImage++,
                    value: e.target.result
                }).appendTo('form');
                console.log(e.target.result);
            };
        })(f);
      reader.readAsDataURL(f);
    }

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

Код PHP

if (isset($_POST['submit'])) {
    define('UPLOAD_DIR', 'images/');
    $patterns = array('/data:image\//', '/;base64/');

    foreach ($_POST as $key => $value) {
      if (preg_match('/^(0|[1-9][0-9]*)$/', $key)) {
        $imageData = explode(',', $value, 2);
        $type = preg_replace($patterns, '', $imageData[0]);;
        if (count($imageData) > 1) {
            $img = str_replace($imageData[0].',', '', $value);
            $img = str_replace(' ', '+', $img);
            $data = base64_decode($img);
            $file = UPLOAD_DIR . uniqid() . '.'.$type;
            $success = file_put_contents($file, $data);
            print $success ? $file : 'Unable to save the file.';
        }

      }
    }
}

HTML-код

<form name="status-form" id="status-form" method="post" enctype="multipart/form-data">
    <input type='file' name='file1[]' id="upload-image" multiple />
    <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>