javascript - 在 HTML 中，如何构建一个文件选择器，它可以在不使用 Action 监听器的情况下更改显示的图像？

Question

这是我在 HTML 中的内容:

<img src="images/defaultProfile.jpg" id="image">
<input type="file" name="pic" accept="image/*" id="imgPath">
<input type="submit" onclick="uploadImg()">

id为"image"的图片默认自动从指定目录加载一张默认图片。然后，用户可以从文件选取器中选取图像。当用户点击写在最后一行的提交按钮时，写在 javaScript 文件上的 uploadImg() 将从输入中获取图像并更改显示的图像。

但是，我的问题是如何让用户通过从目录中选择一个图像文件而不点击“提交”按钮来更改图像。

Answer 1

您可以向图像输入添加一个change 监听器:

document.querySelector('#imgPath').onchange = () => {
  console.log('Now uploading...');
  // uploadImg();
};

<input type="file" name="pic" accept="image/*" id="imgPath">