时间戳

首页 > 解决方案 > 如何预览从文件输入中选择的图像？（如何检测用户何时选择文件以便预览给定的图像？）

javascript - 如何预览从文件输入中选择的图像？（如何检测用户何时选择文件以便预览给定的图像？）

问题描述

所以我试图设置一个图像选择区域，用户在其中选择图像，然后在“选择图像”按钮下方预览所选图像。这是我的html：

<form action="#" id="submitImg">
    <!--Customize the file selection button-->
    <label for="myFile" id="chooseFileBtn"><i class="fas fa-plus"></i>Choose an Image</label><br>
    <input type="file" id="myFile" name="filename" hidden>
    <!--<img> element where the selected image should appear-->
    <img src="#" id="imgPreview">
    <input type="submit" id="submitImage">
</form>

我试过使用input.addEventListener()：

let chooseImg = document.getElementById('#myFile');
chooseImg.addEventListener("change", function(event) {
  document.getElementById('imgPreview').src = document.getElementById('myFile').value;
}, false);

但它不起作用，并且检查元素说Uncaught TypeError: Cannot read property 'addEventListener' of null。

错误截图

我也尝试过使用input.onchange：

let chooseImg = document.getElementById('#myFile');
chooseImg.onchange = function(event) {
  document.getElementById('imgPreview').src = document.getElementById('myFile').value;
}

，但这也不起作用，并且给出了类似的错误消息： Uncaught TypeError: Cannot set property 'onchange' of null

错误截图

那么我应该怎么做呢？

标签： javascripthtmlfrontend

解决方案

vanilla JS不使用#字符作为id

从改变

let chooseImg = document.getElementById('#myFile');

至

let chooseImg = document.getElementById('myFile');

推荐阅读