如何使用 JavaScript 将图像源设置为输入文件？ [复制]答案

【问题标题】：How to set Image source as Input File using JavaScript? [duplicate]如何使用 JavaScript 将图像源设置为输入文件？ [复制]
【发布时间】：2021-12-04 06:25:42
【问题描述】：

所以我想使用 JavaScript 设置 <img src=""> 属性，但来源是输入元素值。

<img src="" id="userImage" onclick="changeImage()">
<input type="file" id="imageInput">

function changeImage() {
   var userImage = document.getElementById("imageInput").value;
   document.getElementById("userImage").src = userImage;
}

注意：<input type="image"> 对我不起作用，因为它不显示选择图像的窗口。
当我打开控制台时，它显示

Failed to load resource:
net::ERR_UNKNOWN_URL_SCHEME

【问题讨论】：

标签： javascript html image input-type-file

【解决方案1】：

您可以使用FileReader 将输入读取为dataURL，然后将该网址附加为image src

function read(val) {
  const reader = new FileReader();

  reader.onload = (event) => {
    document.getElementById("divOutput").src = event.target.result;
  }

  reader.readAsDataURL(val.files[0]);
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File uploader</title>
    <script src="./script.js" defer></script>
</head>

<body>
    <h1>My file uploader</h1>

    <input type='file' id='userImage' onchange = "read(this)">
    <img id='divOutput'></div>


</body>

</html>

【讨论】：

请不要回答在 Stack Overflow 上已有答案的问题。标记以将它们标记为重复。见How do I write a good answer? 和Why are some questions marked as duplicate?
我明白了，但我应该怎么知道：/
好吧，在您提交答案前 12 分钟，已经在问题下方发布了一个链接，该链接指向一个副本。但即使没有，您也应该意识到 Stack Overflow 上有超过 200 万个 JavaScript 问题。没有人要求将文件输入放入<img> 的可能性非常。快速的 Google 搜索应该会产生一些结果。
@Ivar 是的，我的错，我在 sn-p 上写代码，直到现在我才看到你的评论，我确保以后不要这样做