Question

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

从第一个输入字段上传的图像已预览但未预览第二个

Answer 1

一个简单的解决方案就是将FROM Training tr where tr.id NOT IN (SELECT t.training_id from User u INNER JOIN TrainUser t on u.id=t.user_id where u.id=:uid)分配给元素并将其作为参数传递给函数：

id

和js

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

Answer 2

您必须将输入对象传递给JS函数以确定您正在使用的元素。例如，我使用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...">作为对所需元素的引用。

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

的JavaScript

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

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

chrome://flags/

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

2 个答案: