html5使用file API实现图片预览功能 html5使用FileReader对象的方法-html教程-PHP中文网

html5使用file API实现图片预览功能 html5使用FileReader对象的方法

雪夜

发布： 2025-10-23 13:50:02

原创

621人浏览过

使用FileReader对象的readAsDataURL方法读取图片文件，生成base64编码的data URL；2. 将该URL赋值给img标签的src属性，实现上传前本地预览；3. 通过监听input的change事件获取文件，结合类型限制与大小检查提升体验。

html5使用file api实现图片预览功能 html5使用filereader对象的方法

在HTML5中，可以通过File API中的FileReader对象实现图片上传前的本地预览功能。用户选择图片后，无需上传到服务器，即可通过浏览器快速查看图片内容。

1. 基本原理：FileReader读取本地文件

FileReader是HTML5提供的用于读取文件内容的对象，它支持多种读取方式。对于图片预览，常用的是readAsDataURL方法，该方法将文件读取为一个base64编码的字符串，可以直接作为img标签的src属性使用。

2. 实现步骤

要实现图片预览，需要以下关键步骤：

创建一个type="file"的input元素，并设置accept="image/*"限制只选择图片
监听input的change事件，获取用户选择的文件
使用FileReader对象读取文件
将读取结果赋值给img标签显示预览图

3. 示例代码

<input type="file" id="imageInput" accept="image/*">
<img id="preview" src="" alt="图片预览" style="max-width: 300px; margin-top: 10px;">

<script>
document.getElementById('imageInput').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    const reader = new FileReader();
    
    reader.onload = function(event) {
      document.getElementById('preview').src = event.target.result;
    };
    
    reader.readAsDataURL(file);
  }
});
</script>

登录后复制