js本地图片预览实现代码

下面是详细讲解 JavaScript 实现本地图片预览的完整攻略。

下面是详细讲解 JavaScript 实现本地图片预览的完整攻略。

1. 通过 <input type="file"> 获取图片原始信息

要在页面中实现本地图片预览的功能，首先需要在 HTML 中添加一个带有 type="file" 属性的 <input> 元素，用于获取用户选择的文件信息。

<input type="file" id="imageInput">

用户选择了图片文件之后，可以通过 JavaScript 监听 change 事件，获取文件的原始信息。

const imageInput = document.getElementById('imageInput');

imageInput.addEventListener('change', function() {
  // 获取用户选择的文件列表
  const fileList = imageInput.files;

  // 读取第一张图片
  const reader = new FileReader();
  reader.readAsDataURL(fileList[0]);

  // 加载成功后，将图片预览到页面中
  reader.onload = function() {
    const imagePreview = document.getElementById('imagePreview');
    imagePreview.src = reader.result;
  };
});

上述代码中，通过 FileReader 对象读取文件的二进制数据，并将其转换为 data URL 形式的字符串，然后用 img 标签的 src 属性将其展示到页面上。

2. 限制图片大小和类型

在实际应用中，为了保证系统的稳定和安全，需要对用户上传的图片进行限制，比如限制上传的图片大小和类型。

以下是一个示例代码，可以限制上传的图片大小不超过 5MB，且只能上传 jpg、jpeg、png 格式的图片。

const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/png'];

imageInput.addEventListener('change', function() {
  // 获取用户选择的文件列表
  const fileList = imageInput.files;

  const file = fileList[0];
  const fileType = file.type;
  const fileSize = file.size;

  // 判断文件类型是否允许上传
  if (!ALLOWED_IMAGE_TYPES.includes(fileType)) {
    alert('仅支持上传jpg、jpeg、png格式的图片！');
    return;
  }

  // 判断文件大小是否超过限制
  if (fileSize > MAX_IMAGE_SIZE) {
    alert('上传的图片文件不能超过5MB！');
    return;
  }

  // ...
});

上述代码中，通过 file.type 获取文件的 MIME 类型，通过 file.size 获取文件的大小，然后与预设的限制值进行比较，进行限制。

3. 实现多张图片预览

除了展示单张图片之外，还可以实现多张图片的预览功能。

以下是一个示例代码，可以预览用户选择的多张图片，并在点击删除按钮时，将选定的图片从列表中删除。

<input type="file" id="imageInput" multiple>
<div id="imagesPreview"></div>

const imageInput = document.getElementById('imageInput');
const imagesPreview = document.getElementById('imagesPreview');

imageInput.addEventListener('change', function() {
  // 获取用户选择的文件列表
  const fileList = imageInput.files;

  for (let i = 0; i < fileList.length; i++) {
    const file = fileList[i];

    // 判断文件类型是否允许上传
    if (!ALLOWED_IMAGE_TYPES.includes(file.type)) {
      alert('仅支持上传jpg、jpeg、png格式的图片！');
      continue;
    }

    // 判断文件大小是否超过限制
    if (file.size > MAX_IMAGE_SIZE) {
      alert('上传的图片文件不能超过5MB！');
      continue;
    }

    // 读取图片数据，显示预览
    const reader = new FileReader();
    reader.readAsDataURL(file);

    reader.onload = function() {
      // 创建删除按钮
      const deleteButton = document.createElement('button');
      deleteButton.innerHTML = '删除';
      deleteButton.addEventListener('click', function() {
        imagesPreview.removeChild(imageContainer);
      });

      // 创建图片容器
      const imageContainer = document.createElement('div');
      imageContainer.appendChild(deleteButton);

      // 创建图片元素
      const imagePreview = document.createElement('img');
      imagePreview.src = reader.result;
      imageContainer.appendChild(imagePreview);

      // 添加到图片列表中
      imagesPreview.appendChild(imageContainer);
    };
  }
});

上述代码中，使用 fileList.length 循环遍历用户选择的文件列表。对于每个文件，在读取成功后，创建一个图片容器，将图片预览和删除按钮添加到容器中，并将容器添加到图片列表中。

至此，JavaScript 实现本地图片预览的完整攻略结束。感谢阅读！