javascript - 如何加载多个文件图像作为数据 url 并在之后单独更改它们

Question

在 HTML 页面上，有两个使用 img 元素设置的图像。我想通过浏览 pc 目录来更改每个图像。没有数据库。更改图片后，如果重新加载页面，将显示旧图片。即每个图像下都有输入选项。如果我想更改第二张图片，那么我将单击第二张图片下的“选择文件”选项，这将打开用于选择单个图片的窗口。

我得到了一段代码。

<input type='file' accept='image/*' onchange='openFile(event)'>
 <img id='output' width=20>

<input type='file' accept='image/*' onchange='openFile(event)'>
 <img id='output' width=20>

<input type='file' accept='image/*' onchange='openFile(event)'>
 <img id='output' width=20>

<script>
  var openFile = function(event) {
  var input = event.target;

  var reader = new FileReader();
  reader.onload = function(){
  var dataURL = reader.result;
  var output = document.getElementById('output');
  output.src = dataURL;
};
reader.readAsDataURL(input.files[0]);
};
</script>

使用此代码，我可以只为一个 img 元素上传图像。但是如果我想将它用于两个 img 元素，如果我将 id 'output' 更改为 class 'output' 则它不起作用。我需要了解它的原因以及针对多个图像的可能解决方案。

https://www.javascripture.com/FileReader

Answer 1

下面的代码显示:

• 如何使用一个文件输入加载多个数据 url 并为每个创建一个图像框(图像 + 文件输入 + 删除按钮)。
• 如何单独更改每个图像框的加载图像。
• 如何完全删除图像框。

片段说明:

• 点击蓝色的大“+” block 将一个或多个图像添加到列表中。
• 单击图像以单独更改它。
• 点击图片右上角的红叉将其删除。

它是引擎盖下的所有文件输入(更改 hidden 类以显示它们)，它们被隐藏只是因为它看起来更好。

var container = document.getElementById('img_container');
var placeholder = document.getElementById('placeholder');

// utility function doing both createElement and setAttributes
function create(elementName, attributes) {
  var elem = document.createElement(elementName);
  if (typeof attributes === 'object') {
    Object.keys(attributes).forEach(function(attributeName) {
      elem.setAttribute(attributeName, attributes[attributeName]);
    });
  }
  return elem;
}

// load a file image as a data url and callback with this data url
function loadImage(file, callback) {
  var reader = new FileReader();
  reader.onload = function(){
    var dataURL = this.result;
    callback(dataURL);
  };
  reader.readAsDataURL(file);
}

// self explainatory
function createAndInsertNewImageBlock(id, dataURL) {
  var output = create('div', { 'class': 'img_block' });

  // image label, linked to the file input through their for/id attributes
  var label = create('label', { 'for': id, 'class': 'img_label' });
  var img = create('img', { 'class': 'image', src: dataURL });
  label.appendChild(img);
  output.appendChild(label);

  // single file input triggered by the image label, it is hidden
  var input = create(
    'input',
    {
      'type': 'file',
      'class': 'hidden',
      'accept': 'image/*',
      id: id
    }
  );
  // load single data url on change and change the image src
  input.addEventListener('change', function() {
    loadImage(this.files.item(0), function(data) {
      img.src = data;
    });
  });
  output.appendChild(input);

  // delete block button
  var cross = create('div', { 'class': 'cross' });
  cross.addEventListener('click', function() {
    output.remove();
  });
  output.appendChild(cross);

  // insert new image block just before the '+' placeholder
  container.insertBefore(output, placeholder);
}

// handler for the onChange event of the placeholder's file input
function openFiles(evt) {
  var files = evt.target.files;
  for (let i = 0; i < files.length; i++) {
    var file = files.item(i);
    loadImage(file, function(dataURL){
      var count = container.children.length;
      // lame unique id generation for linking label to input
      var id = 'img(' + count + '/' + (Date.now()).toString(16) + ')' + file.name;
      createAndInsertNewImageBlock(id, dataURL);
    });
  };
  
};

#img_container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.image {
  width: 150px;
  margin: 5px;
}

.hidden {
  position: absolute;
  display: none;
  left: -9999px;
}
.img_block {
position: relative;
}
.img_label {
  display: block;
  cursor: pointer;
}

.plus {
  width: 100px;
  height: 100px;
  font-size: 50px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2060FF;
}
.plus:after {
content: '+';
}

.cross {
  width: 15px;
  height: 15px;
  font-size: 20px;
  font-weight: bold;
  background-color: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF2060;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.cross:hover {
background-color: rgba(255,255,255,0.6);
}
.cross:after {
content: 'x';
}

<div id="img_container">
  <div id="placeholder">
    <label class="img_label" for="placeholder_input">
      <div class="plus"></div>
    </label>
    <input type='file' id="placeholder_input" class="hidden" accept="image/*" onchange='openFiles(event)' multiple>
  </div>
</div>