Выбор нескольких изображений, но хранение данных в разных местах с использованием Javascript

Поэтому я использую следующий код для пользователей для загрузки фотографий (как вы можете видеть, я не позволяю пользователю выбрать несколько файлов одновременно, ему придется выбрать один файл, открыть его, затем выбрать следующий файл, открыть его так далее).

HTML:

<input type="file" capture="camera" accept="image/*" id="files1" name="files[]">
<output id="list"></output>

<form action="post.php">
<input type='hidden' id='imgsrc1' name='imgsrc1'>
<input type='hidden' id='filepath1' name='filepath1'>

<input type='hidden' id='imgsrc2' name='imgsrc2'>
<input type='hidden' id='filepath2' name='filepath2'>

<input type='hidden' id='imgsrc3' name='imgsrc3'>
<input type='hidden' id='filepath3' name='filepath3'>

<input type="submit" name="submit" value"Submit Listing">
</form>

JavaScript

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

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      imgsrc = e.target.result;
      filename = theFile.name;
      filepath = "images/uploads/" + theFile.name;
      span.innerHTML = ['<img class="thumb" src="', imgsrc,
                        '" title="', filepath, '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
      document.getElementById('filepath1').value=filepath;
      document.getElementById('imgsrc1').value=imgsrc;

    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);

 }
}

document.getElementById('files1').addEventListener('change', handleFileSelect, false);

Пользователь выбирает первое изображение, затем JavaScript отображает фотографию, добавляя ее внутрь <output id="list"></output>

Строки ниже (взятые из кода выше) сохраняют путь выбранного изображения в поле ввода 'filepath1' и данные изображения base64 в поле ввода 'imgsrc1':

JavaScript:

  document.getElementById('filepath1').value=filepath;
  document.getElementById('imgsrc1').value=imgsrc;

HTML:

 <input type='hidden' id='imgsrc1' name='imgsrc1'>
 <input type='hidden' id='filepath1' name='filepath1'>

Проблема в том, что я хочу, чтобы пользователь мог выбрать 3 изображения по одному. Когда пользователь выбирает первое изображение, это нормально, но когда он выбирает второе изображение, он снова запускает эту функцию JavaScript и перезаписывает / добавляет все, что хранится в скрытых полях ввода.

Когда пользователь выбирает второе изображение, я хочу, чтобы данные сохранялись в двух разных скрытых полях ввода, например:

<input type='hidden' id='imgsrc2' name='imgsrc2'>
<input type='hidden' id='filepath2' name='filepath2'>

Я понятия не имею, как это сделать. Вероятно, есть действительно простой способ сделать это с помощью счетчика или чего-то еще, но сейчас это 23:18, и у меня завтра клиент в 8 утра, это последний бит, который мне нужно исправить для них, смеется. Любая помощь будет оценена.

2 ответа

Решение

Добавьте счетчик и просто увеличивайте его каждый раз, когда добавляете изображение:

var imgNum = 0;

function handleFileSelect(evt) {

if (imgNum > 3) return;
var files = evt.target.files; // FileList object

// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {

  // Only process image files.
  if (!f.type.match('image.*')) {
    continue;
  }

  var reader = new FileReader();

  // Closure to capture the file information.
  reader.onload = (function(theFile) {
    return function(e) {
      // Render thumbnail.
      var span = document.createElement('span');
      imgsrc = e.target.result;
      filename = theFile.name;
      filepath = "images/uploads/" + theFile.name;
      span.innerHTML = ['<img class="thumb" src="', imgsrc,
                        '" title="', filepath, '"/>'].join('');
      document.getElementById('list').insertBefore(span, null);
      document.getElementById('filepath'+imgNum).value=filepath;
      document.getElementById('imgsrc'+imgNum).value=imgsrc;

    };
  })(f);

  // Read in the image file as a data URL.
  reader.readAsDataURL(f);

 }
  imgNum++;
}

document.getElementById('files1').addEventListener('change', handleFileSelect, false);

Если я получу то, что вы хотите, то наивным решением будет использование вашего соглашения об именах и index вашего цикла:

for ( let i = 1; i <= 3; i++ ) {
  f = files[ i - 1 ]
  // ...
  document.getElementById( 'filepath' + i ).whatever
}

Сказав, что я, вероятно, пойду по-другому, я добавлю прослушиватель событий и просто добавлю новые файлы в массив, если массив достигнет максимальной длины (в данном случае 3), а затем выполнил некоторую логику, которая останавливает пользователя. загружать больше, а затем отправлять данные, как вам нравится, без использования <form> и скрытые элементы.

Другие вопросы по тегам