JavaSctit 利用FileReader和滤镜上传图片预览功能

下面就为您详细讲解“JavaScript利用FileReader和滤镜上传图片预览功能”的完整攻略。

简介

在网站开发中，图片上传是一个非常重要的功能，但是大多数情况下，用户只有在上传完成后才能预览图片，这会为用户带来不便。所以，在本文中，我们将为您讲解如何使用JavaScript利用FileReader和滤镜实现上传图片的预览功能。

操作步骤

HTML代码

首先，我们需要在HTML中放置以下代码：

<input type="file" id="uploadImg">
<img id="imgPreview">

其中，<input>标签的type属性为"file"，表示该标签可以支持文件上传功能，而<img>标签则用于预览图片。

JavaScript代码

然后，在JavaScript中，我们需要编写以下代码：

// 获取上传图片的input标签
var upload = document.getElementById('uploadImg');

// 为其添加change事件
upload.addEventListener('change', function(event) {
  // 获取选中的文件
  var file = this.files[0];

  // 检查文件是否是图片
  if (!file.type.startsWith('image/')) {
    console.log('请选择图片文件');
    return;
  }

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

  // 为其添加读取完成事件
  reader.addEventListener('load', function() {
    // 将读取到的数据，赋值给img标签
    document.getElementById('imgPreview').src = reader.result;
  });

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

以上代码实现了以下功能：

获取选中的文件。
检查是否为图片类型。
创建FileReader对象，并为其添加读取完成事件。
开始读取文件。
将读取到的数据赋值给img标签。

CSS样式

最后，我们还需要为图片添加一些样式，以展示更好的效果。

#imgPreview {
  max-width: 100%;
  max-height: 300px;
  filter: grayscale(0.5) brightness(0.9);
}

在CSS样式中，我们使用了max-width和max-height属性来限制图片的最大宽度和最大高度，并使用filter属性来添加灰度、亮度等效果。

示例说明

下面，我们将通过两条示例来展示如何使用JavaScript利用FileReader和滤镜实现上传图片的预览功能。

示例1：预览单张图片

HTML代码：

<input type="file" id="uploadImg">
<img id="imgPreview">

JavaScript代码：

var upload = document.getElementById('uploadImg');

upload.addEventListener('change', function(event) {
  var file = this.files[0];

  if (!file.type.startsWith('image/')) {
    console.log('请选择图片文件');
    return;
  }

  var reader = new FileReader();

  reader.addEventListener('load', function() {
    document.getElementById('imgPreview').src = reader.result;
  });

  reader.readAsDataURL(file);
});

CSS样式：

#imgPreview {
  max-width: 100%;
  max-height: 300px;
}

现在，您可以尝试选择一张图片文件并查看其预览效果了。

示例2：添加滤镜效果