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

Question

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

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

用户 select 是第一张图片，JavaScript 然后通过将照片添加到 <output id="list"></output>

中来显示照片

下面的行（取自上面的代码）将 selected 图像的路径存储到输入框 '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'>

问题是，我希望用户能够 select 3 张图片，一张一张。当用户 select 使用第一张图片时，它很好，但是当他们 select 第二张图片时，它将运行 JavaScript 再次起作用并且 overwrite/add存储在隐藏输入框中的任何内容。

当用户select第二张图片时，我希望将数据存储在两个不同的隐藏输入框中，例如：

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

我不知道该怎么做。可能有一种非常简单的方法可以通过使用计数器或其他东西来执行此操作，但它目前是 11:18PM 并且我明天早上 8 点有客户来，这是我需要为他们修复的最后一点，哈哈。任何帮助将不胜感激。

Answer 1

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

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

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

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

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

Selecting multiple images but storing the data in separate places using Javascript

html

javascript

image

image-uploading