javascript - 使用 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);