选择多个图像，但使用 Javascript 将数据存储在不同的位置

Question

所以我使用以下代码让用户上传照片（如您所见，我不允许用户一次选择多个文件，他们必须选择一个文件，打开它，然后选择下一个文件，打开它等等）。

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'>

我不知道该怎么做。可能有一个非常简单的方法可以通过使用柜台或其他东西来做到这一点，但现在是晚上 11 点 18 分，我明天早上 8 点让客户进来，这是我需要为他们解决的最后一点，哈哈。任何帮助将不胜感激。

Answer 1

添加一个计数器并在每次添加图像时简单地增加它：

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);

Answer 2

如果我得到你想要的，那么一个天真的解决方案就是使用你的命名约定和你的 for 循环的 index：

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

话虽如此，我可能会以不同的方式进行处理，但我会附加事件侦听器并简单地将新文件推送到数组中，如果数组达到其最大长度（在本例中为 3）然后执行一些逻辑阻止用户上传更多内容，然后在不使用 <form> 和隐藏元素的情况下发送您喜欢的数据。