Question

在 HTML 中，如何构建一个无需使用动作监听器即可更改显示图像的文件选择器？

2018-05-01

965

javascript html

这是我的 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">

Answer 2

看看这个为什么我不能做 <img src="C:/localfile.jpg">? 。如果您的计划是在将图像上传到服务器之前显示图像，那么这是行不通的。您可以做的是将“onchange”事件（ https://www.w3schools.com/jsref/event_onchange.asp ）写入文件选择输入行（代码中的第二行），然后将其上传到临时目录并显示它。当用户单击上传按钮时，您可以使更改永久生效。如果用户取消，您将显示默认的个人资料页面。