前端上传图片预览

最新推荐文章于 2025-05-07 13:05:00 发布

原创

最新推荐文章于 2025-05-07 13:05:00 发布

· 2.9k 阅读

10 ·

版权

文章标签：

#前端 #图片

本文介绍了前端实现图片上传预览的两种方法：1. 使用FileReader对象读取并显示图片；2. 通过URL.createObjectURL(blob)创建临时URL进行预览。提供了demo示例链接及完整代码的GitHub资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端上传图片预览

此文将介绍两种方法来实现前端上传图片预览。

方法1：FileReader

FileReader对象允许Web应用程序异步读取存储在计算机上的文件（或原始数据缓冲区）的内容，使用File或Blob对象指定要读取的文件。其中File对象可以是来自用户在一个<input>元素上选择文件返回的FileList对象，也可以来自拖放操作生成的DataTransfer对象，还可以是来自一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。
demo示例：

var oFileReader = new FileReader(); // 创建一个FileReader对象
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pix

最低0.47元/天解锁文章