JS实现的input选择图片本地预览功能示例

下面我将为你详细讲解JS实现的input选择图片本地预览功能的攻略。

简介

JS实现的input选择图片本地预览功能，顾名思义，就是可以通过JS代码来实现input表单中选择图片后，在本地预览图片的功能。这类功能一般可以用在上传头像、上传图片等场景中。

过程

下面，我将带你一步步实现这个功能。

第一步：HTML结构

首先，我们需要编写HTML结构，代码如下：

<input type="file" accept="image/*" onchange="previewImage(event)">
<img id="preview">

其中，<input type="file">标签用于创建一个文件选择器字段，accept="image/*"属性可以限制可选文件类型，这里我们限制只能选择图片文件。onchange="previewImage(event)"指定了当用户选择文件后，会调用名为previewImage的函数。

而<img id="preview">则是用于展示图片预览的区域。需要注意的是，id属性必须为preview，因为我们在代码中会通过这个id来获取到该元素。

第二步：JS代码

接着，我们需要编写JS代码实现图片预览功能，代码如下：

function previewImage(event) {
  // 获取图片预览区域的元素
  var preview = document.querySelector('#preview');

  // 获取用户选择的文件对象
  var file = event.target.files[0];

  // 如果不存在选择的文件，则返回
  if (!file) {
    return;
  }

  // 使用FileReader API读取文件数据
  var reader = new FileReader();

  // 读取成功后，将预览区域的src属性设置为读取到的数据
  reader.onload = function(event) {
    preview.src = event.target.result;
  };

  reader.readAsDataURL(file);
}

运行上面的代码后，当用户选择了图片文件后，就会在预览区域展示该图片的预览效果。

示例说明一

为了更好的理解和演示该功能，下面我会再给出一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Input选择图片本地预览功能示例</title>
  <script>
    function previewImage(event) {
      // 获取图片预览区域的元素
      var preview = document.querySelector('#preview');

      // 获取用户选择的文件对象
      var file = event.target.files[0];

      // 如果不存在选择的文件，则返回
      if (!file) {
        return;
      }

      // 使用FileReader API读取文件数据
      var reader = new FileReader();

      // 读取成功后，将预览区域的src属性设置为读取到的数据
      reader.onload = function(event) {
        preview.src = event.target.result;
      };

      reader.readAsDataURL(file);
    }
  </script>
</head>
<body>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <br>
  <img id="preview" style="max-width: 200px;">
</body>
</html>

上面的代码中，我给预览区域添加了一个样式max-width: 200px;，这样可以限制图片的最大宽度，避免图片过大导致预览区域溢出。

示例说明二

另外一个示例是在预览区域添加一个删除按钮，方便用户在选择错误的情况下可以直接删除图片重新选择：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Input选择图片本地预览功能示例</title>
  <script>
    function previewImage(event) {
      // 获取图片预览区域的元素
      var preview = document.querySelector('#preview');
      var deleteButton = document.querySelector('#delete-button');

      // 获取用户选择的文件对象
      var file = event.target.files[0];

      // 如果不存在选择的文件，则返回
      if (!file) {
        return;
      }

      // 使用FileReader API读取文件数据
      var reader = new FileReader();

      // 读取成功后，将预览区域的src属性设置为读取到的数据
      reader.onload = function(event) {
        preview.src = event.target.result;
        deleteButton.style.display = 'inline-block';
      };

      reader.readAsDataURL(file);
    }

    function deleteImage() {
      var preview = document.querySelector('#preview');
      var deleteButton = document.querySelector('#delete-button');
      preview.src = '';
      deleteButton.style.display = 'none';
    }
  </script>
</head>
<body>
  <input type="file" accept="image/*" onchange="previewImage(event)">
  <br>
  <img id="preview" style="max-width: 200px;">
  <br>
  <button id="delete-button" style="display: none;" onclick="deleteImage()">删除</button>
</body>
</html>

上面的代码中，当用户成功选择了图片并且图片加载成功后，会在预览区域下方添加一个删除按钮，点击该按钮就可以删除预览的图片并隐藏该按钮。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的input选择图片本地预览功能示例 - Python技术站