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);
});

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

1. 获取选中的文件。
2. 检查是否为图片类型。
3. 创建FileReader对象，并为其添加读取完成事件。
4. 开始读取文件。
5. 将读取到的数据赋值给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：添加滤镜效果

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() {
    var img = document.createEelement('img');
    img.src = reader.result;

    // 滤镜效果
    img.style.filter = 'grayscale(0.5) brightness(0.9)';

    // 添加到预览区域
    var preview = document.getElementById('imgPreview');
    preview.innerHTML = '';
    preview.appendChild(img);
  });

  reader.readAsDataURL(file);
});

CSS样式：

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

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

总结

在本文中，我们讲解了如何使用JavaScript利用FileReader和滤镜实现上传图片的预览功能，操作步骤包括：HTML代码、JavaScript代码和CSS样式。同时，我们还通过示例演示了如何预览单张图片和如何添加滤镜效果。希望本文对您在网站开发中的图片上传功能有所帮助。