js实现的在本地预览图片功能示例

“js实现的在本地预览图片功能”的攻略如下：

“js实现的在本地预览图片功能”的攻略如下：

1. 了解FileReader API

JavaScript中的FileReader API可以让我们在浏览器中读取文件，包括图片等二进制文件。该API中最常用的方法是readAsDataURL()，用于读取指定文件并将其转换为Data URL格式，以便在HTML <img>元素中进行显示。

以下是一个简单的示例程序，演示如何使用FileReader API读取用户上传的图片文件。

// 获取文件选择框的元素
let fileInput = document.querySelector('input[type="file"]');

// 监听用户选择的文件
fileInput.addEventListener('change', event => {
  let file = event.target.files[0];

  // 检查文件类型是否为图片
  if (!file.type.startsWith('image/')) {
    console.log('选择的文件不是图片！');
    return;
  }

  // 创建FileReader对象
  let reader = new FileReader();

  // 当文件读取完成后，将其显示到<img>元素中
  reader.onload = event => {
    let imgElement = document.querySelector('img');
    imgElement.src = event.target.result;
  }

  // 读取文件
  reader.readAsDataURL(file);
});

上述代码中，我们首先获取了一个<input>元素用于文件选择，然后监听用户的文件选择事件，当用户选择一个文件时，我们首先检查文件类型是否为图片，如果是，则创建一个FileReader对象并使用readAsDataURL()方法读取该文件，最后将读取到的Data URL设置为HTML <img>元素的src属性，以显示该图片。

2. 使用JavaScript实现拖放上传文件功能

除了通过文件选择框上传文件外，我们还可以使用JavaScript实现拖放上传文件的功能。以下示例演示如何使用JavaScript实现拖放上传文件功能，同时预览用户拖放的图片。

// 获取拖放区域的元素
let dropArea = document.querySelector('#drop-area');

// 防止浏览器打开拖放文件时直接跳转到文件URL
["dragenter", "dragover", "dragleave", "drop"].forEach(eventName => {
  dropArea.addEventListener(eventName, event => {
    event.preventDefault();
    event.stopPropagation();
  }, false);
});

// 监听拖放区域的拖放事件
["dragenter", "dragover"].forEach(eventName => {
  dropArea.addEventListener(eventName, event => {
    dropArea.classList.add('highlight');
  }, false);
});

["dragleave", "drop"].forEach(eventName => {
  dropArea.addEventListener(eventName, event => {
    dropArea.classList.remove('highlight');
  }, false);
});

dropArea.addEventListener('drop', event => {
  let fileList = event.dataTransfer.files;
  let imageType = /^image\//;

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

    // 检查文件类型是否为图片
    if (!imageType.test(file.type)) {
      continue;
    }

    // 创建FileReader对象
    let reader = new FileReader();

    // 当文件读取完成后，将其显示到<div>中
    reader.onload = event => {
      let imageElement = document.createElement('img');
      imageElement.src = event.target.result;
      dropArea.appendChild(imageElement);
    }

    // 读取文件
    reader.readAsDataURL(file);
  }
});

上述代码中，我们首先创建了一个<div>元素作为拖放区域，并在其上添加了一些拖放事件的监听器，以便在用户拖放文件时高亮显示该区域，并防止浏览器默认地打开文件URL。

当用户在拖放区域中放置文件时，我们首先获取拖放事件的文件列表，然后逐个检查文件类型是否为图片，如果是，则创建FileReader对象并使用readAsDataURL()方法读取该文件，最后将读取到的Data URL设置为HTML <img>元素的src属性，以预览该图片。

以上就是实现 JavaScript 在本地预览图片功能的完整攻略，其中包含了使用 FileReader API 读取文件和使用 JavaScript 实现拖放上传文件功能这两个示例。