JS函数通过文件上传更改页面上的图像

Question

我目前对代码一无所知，目前我正在自学。当用户选择要上传的文件时，我希望能够更改网页上的图像。有很多这样的例子，我一直在玩答案Show an image preview before upload

但是，我有一个包含多个上传按钮的页面，每个按钮都有自己的关联图像。上面的示例监视特定输入文件元素的更改，然后触发并更新图像元素。

我正在尝试基于上述创建一个 JS 函数，我将上传的文件对象和图像元素 id 传递给，由文件输入元素的 onChange 事件调用。

感觉好像应该很简单，但它突出了我的严重缺乏理解。非常感谢任何帮助。

编辑：

我试过了（请不要笑……）

HTML

<input type="file" id="file_n" onChange="swapImage(this,'image_n)/>
<img id="image_n" />

Javascript

function swapImage(e1, imgID) {
    var reader = new FileReader();

    reader.onload = function (e1) {
        // get loaded data and render thumbnail.
        document.getElementById(imgID).src = e.target.result;
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

为了清楚 file_n 和 image_n 应该代表每个的倍数，例如file_1、file_2、file_3 和对应的 image_1、image_2、image_3，因此在我看来，为什么将它们传递给函数似乎是可行的方法。

Answer 1

以下是预览图像的基础知识。

var m, f, v;

f = document.getElementById("files");
v = document.getElementById("viewport");

f.addEventListener("change", function(e){
	m = new FileReader();
	m.onload = function(e){
		v.src = e.target.result;
	};
	m.readAsDataURL(this.files[0]);
});

#viewport{
    width: 250px;
    height: 250px;
}

<img id="viewport" />

<input type="file" id="files" />
<img id="image" />

Answer 2

有很多方法可以做到这一点，具体取决于您的 DOM 的外观。例如，在文件输入后查询第一个 img 或其父子元素，使用 id、数据集查询正确的 img 元素，使用 img 的 id 作为第二个参数传入 img 元素 swapImage(this, image_n)（所有不覆盖任何全局变量的 DOM id 都可以在不使用任何查询选择器的情况下访问）

var URL = window.URL || window.webkitURL

window.swapImage = function (elm) {
  var index = elm.dataset.index
  // URL.createObjectURL is faster then using the filereader with base64
  var url = URL.createObjectURL(elm.files[0])
  document.querySelector('img[data-index="'+index+'"]').src = url
}

<input type="file" data-index="0" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="0" width="50" height="50">

<br><br>

<input type="file" data-index="1" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="1" width="50" height="50">

<br><br>

<input type="file" data-index="2" onChange="swapImage(this)">
<img src="https://dummyimage.com/50x50/000/fff" data-index="2" width="50" height="50">