原生js FileReader对象实现图片上传本地预览效果

2023年5月27日上午9:36 • JavaScript

以下是使用原生JS FileReader对象实现图片上传本地预览效果的完整攻略。

1. 创建一个input元素用于上传图片

首先，在HTML文件中创建一个<input>元素，用于上传图片，例如：

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

2. 绑定input元素的change事件

在JS文件中，使用document.querySelector方法获取到该<input>元素，并使用addEventListener方法绑定change事件：

var inputFile = document.querySelector('#inputFile');
inputFile.addEventListener('change', function() {
  // 文件已经选择好，接下来处理预览图片的相关逻辑
});

3. 获取选择的图片文件

当用户选择好图片后，change事件被触发，我们在事件处理函数中可以通过HTMLInputElement.files属性获取到所选择的文件列表。像这样：

var inputFile = document.querySelector('#inputFile');
inputFile.addEventListener('change', function() {
  var files = this.files;
  // files是一个FileList类型的对象，包含了用户选择的文件列表
});

4. 使用FileReader对象读取文件

有了FileList类型的对象，我们就可以使用FileReader对象来读取文件了。如下是一个使用FileReader读取图片文件的示例：

var inputFile = document.querySelector('#inputFile');
inputFile.addEventListener('change', function() {
  var files = this.files;
  var reader = new FileReader();
  reader.readAsDataURL(files[0]); // 读取上传的第1个文件
  reader.onload = function() {
    // 操作读取完成后的Data URL
    console.log(reader.result); 
  };
});

这里，在readAsDataURL方法中传入了要读取的上传文件，内部会异步加载文件内容，并以Data URL的形式返回文件内容，这个Data URL字符串可以被用于预览图片或者保存到数据库。

5. 在页面中预览图片

我们可以将读取到的Data URL作为图片的源地址，动态地在页面中显示出这个图片。一个预览图片的示例代码如下：

var inputFile = document.querySelector('#inputFile');
var imgPreview = document.querySelector('#imgPreview');
inputFile.addEventListener('change', function() {
  var files = this.files;
  var reader = new FileReader();
  reader.readAsDataURL(files[0]); // 读取上传的第1个文件
  reader.onload = function() {
    imgPreview.src = reader.result; // 更新图片的源地址
  };
});

预览图片的方式有很多种，可以使用<img>标签，也可以使用<canvas>标签，或者其他自定义的元素。

6. 示例

以下是一个完整的演示代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>使用 File API 显示图片预览效果</title>
</head>
<body>

<h1>使用 File API 显示图片预览效果</h1>

<input type="file" id="inputFile">
<img id="imgPreview" src="placeholder.png" alt="预览图">

<script>
var inputFile = document.querySelector('#inputFile');
var imgPreview = document.querySelector('#imgPreview');

inputFile.addEventListener('change', function() {
  var files = this.files;
  var reader = new FileReader();
  reader.readAsDataURL(files[0]); // 读取上传的第1个文件
  reader.onload = function() {
    imgPreview.src = reader.result; // 更新图片的源地址
  };
});
</script>

</body>
</html>

打开这个HTML文件，选择一个图片文件，就可以在预览区看到所选图片了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js FileReader对象实现图片上传本地预览效果 - Python技术站