上传前的 Javascript 图像预览 - Javascript (1)

📌 相关文章

📜 上传前的 Javascript 图像预览 - Javascript (1)

📅 最后修改于: 2023-12-03 15:21:28.299000 🧑 作者: Mango

上传前的 Javascript 图像预览 - Javascript

有时候，我们需要在上传图片之前，对要上传的图片进行预览。这在用户体验方面会更友善。在这种情况下，我们可以使用 Javascript 来实现。

HTML 代码

首先，我们需要一个 HTML 页面，它包含一个 input 标签和一个用于显示预览图像的 img 标签。下面是一个示例，其中 input 类型为文件，用于选择要上传的图像文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>上传前的 Javascript 图像预览</title>
  </head>
  <body>
    <input type="file" id="imgInput" onchange="previewImage()">
    <img id="preview">
  </body>
</html>

Javascript 代码

现在，让我们来编写一个可以预览图像的 Javascript 函数。下面的代码使用 FileReader 对象，以 Data URL 的格式读取选定的文件，并使用 img 标签来显示图片预览：

function previewImage() {
  var preview = document.querySelector('#preview');
  var file = document.querySelector('#imgInput').files[0];
  var reader = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}

解释

该函数首先使用 document.querySelector() 方法来获取 img 标签的引用，并将其存储在名为 preview 的变量中。然后，使用相同的方法来获取 input 标签并将其存储在名为 file 的变量中。

接下来，创建一个新的 FileReader 对象，并为其添加一个 load 事件监听器。该监听器一旦加载完成，就会调用一个回调函数。在回调函数中，将 FileReader.result 赋给 img 标签的 src 属性，以便预览选定的图像。

最后，如果文件存在，则通过调用 FileReader.readAsDataURL() 方法将其读取为 Data URL 格式。

现在，我们已经成功地实现了 Javascript 图像预览功能，用户在选择要上传的图像文件之前可以看到其预览效果。

参考

MDN - FileReader API