JavaScript 前端图片即时预览实现指南

前端图片即时预览实现原理

在当前前端开发环境中，实现图片上传后的即时预览功能已变得十分便捷。

仅需借助 File 对象与 FileReader 对象，即可轻松完成此功能，无需引入额外的第三方类库。

HTML 结构示例

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
</body>
</html>

File 对象与文件元数据

首先关注 input 元素，该元素拥有一个 files 属性，其返回值为 FileList 对象，即 File 对象的集合。

通过 input.files[0] 的语法可以获取到具体的 File 对象。然而，该对象仅包含用户所选文件的基本元数据，如文件名、大小、类型及最后修改时间等，并不直接包含文件的具体数据内容。

开发者只能依据这些元数据对用户选择的文件进行初步的限制或校验。

因此，我们需要借助 FileReader 对象来读取用户所选文件的实际数据。

首先，我们需要实例化一个 FileReader 对象。

var x=new FileReader;

FileReader 属性与事件机制

初始化后的 FileReader 对象具备特定的属性及支持的事件监听器。

与 Ajax 类似，FileReader 提供了 readyState 属性用于查看读取状态，但在实际开发中该属性的使用价值有限。

FileReader 提供了 onloadend 事件，用于处理数据读取完成后的逻辑；此外，onprogress 事件在读取过程中会不断触发，可用于实现进度条等交互效果。

另一个关键属性是 result，初始化时其值为 null，一旦数据读取完成，该属性将包含读取到的数据。

接下来，我们可以利用该对象读取用户选择的图片，实现过程相对简单。

当用户在 input 中选择了文件时，会触发 change 事件，此时即可开始读取数据。

 document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }

readAsDataURL 方法用于读取 File 对象，并将数据以 Base64 编码格式填充至 FileReader 对象的 result 属性中。

数据读取完成后，会触发 onloadend 事件，在此事件中可将 result 的值赋值给 img 标签，从而完成预览。

x.onloadend=function(){
  document.images[0].src=this.result;
 }

完整代码示例

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
 <input type="file" name="image" />
</form>
<script type="text/javascript">
 var x=new FileReader;
 document.forms[0].elements[0].onchange=function(){
  x.readAsDataURL(this.files[0]);
 }
 x.onloadend=function(){
  document.images[0].src=this.result;
 }
</script>
</body>
</html>

功能扩展与多媒体预览

上述代码仅为一个基础演示，主要实现了本地文件的预览功能。以此为基础，开发者可以进一步扩展，例如增加对上传文件的类型判断、大小限制或优化用户界面。

FileReader 的功能不仅限于 readAsDataURL 这一种方法。

除了图片，音频和视频文件同样可以尝试进行本地预览。只需将 result 属性的值赋值给对应的 audio 或 video 标签的 src 属性即可。需要注意的是，受限于内存大小，读取视频文件时可能会失败。

以上内容即为本文的全部介绍，希望对各位的学习有所帮助，也欢迎大家继续支持本站。