无法从第二个输入字段预览图像答案

【问题标题】：Cant preview image from second input field无法从第二个输入字段预览图像
【发布时间】：2018-04-19 10:40:09
【问题描述】：

Html，两个输入字段

<input id="image" type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

<input id="pic" type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

JavaScript

  function previewFile() {
 var preview = document.querySelector('img');
var file    = `document.querySelector('input[type=file]').files[0];



 var reader  = new FileReader();
reader.addEventListener("load", function () {
 preview.src = reader.result;
 }, false);
if (file) {
 reader.readAsDataURL(file);
 }
}

从第一个输入字段上传的图像正在预览，但不是第二个

【问题讨论】：

你看到第一张图片中第二个输入的预览了吗？
document.querySelector() 返回文档中的第一个 Element，因此您的 preview 和 filevariables 将始终包含第一个匹配的元素，请尝试使用 id 作为选择器
@AliSheikhpour 不，无法预览第二张图片
@SudhirBastakoti 那么我需要在我的 js 函数中进行哪些更改

标签： javascript html image tags preview

【解决方案1】：

一个简单的解决方案就像将ids 分配给元素并将其作为参数传递给您的函数：

<input id="image" type="file" onchange="previewFile('image')"><br>
<img id="inp-image" src="" height="200" alt="Image preview...">

<input id="pic" type="file" onchange="previewFile('pic')"><br>
<img id="inp-pic" src="" height="200" alt="Image preview...">

和js

function previewFile(sel) {
    var preview = document.querySelector('#inp-' + sel); // use selector
    var file = document.querySelector('#'+sel).files[0]; // use selector
    ...

【讨论】：

【解决方案2】：

您必须将输入对象传递给 JS 函数来决定您正在使用的元素。例如，我使用 nextElementSibling 和 this 作为所需元素的引用。

<input id="image" type="file" onchange="previewFile(this)">
<img src="" height="200" alt="Image preview...">

<input id="pic" type="file" onchange="previewFile(this)">
<img src="" height="200" alt="Image preview...">

JavaScript

function previewFile(obj) {
var preview = this.nextElementSibling;
var file= obj.files[0];


var reader  = new FileReader();
reader.addEventListener("load", function () {
  preview.src = reader.result;
 }, false);
if (file) {
 reader.readAsDataURL(file);
 }
}

您还可以为所有元素提供 ID 并将 ID 传递给函数，例如：

<input id="file1" type="file" onchange="previewFile('file1','preview1')">
<br>
<img id="preview1" src="" height="200" alt="Image preview...">

【讨论】：

谢谢。如果有帮助，您可以投票或接受答案。