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＆amp;相应的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，dataset查询正确的img元素，使用img的id传入img元素作为第二个参数 swapImage(this, image_n)（所有不覆盖任何全局变量的DOM ID都可以在不使用任何查询选择器的情况下访问）

＆＃13;

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
}

＆＃13;

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

＆＃13;

JS功能通过文件上传来更改页面上的图像

2 个答案: