html5实现图片预览和查看原图

最新推荐文章于 2024-07-29 15:03:08 发布

蚊子0_0

最新推荐文章于 2024-07-29 15:03:08 发布

阅读量1.5w

点赞数 5

文章标签： javascript filereader html5

本文链接：https://blog.csdn.net/bsj911gtaaa/article/details/45895079

版权

本文介绍了HTML5的FileReader API如何用于图片预览和查看原图。通过fileReader读取单张或多张图片，利用change事件和base64编码显示图片。此外，还讲解了如何处理拖拽图片以及获取图片原始尺寸实现查看原图功能。HTML5简化了这些操作，提供了一种更安全、便捷的方式来处理本地文件。

摘要由CSDN通过智能技术生成

html5从一开始就给开发者很多的期待，提供众多新的API，不用再想以前一样，为了实现某个功能写很多的代码。在以前，如果要实现图片预览会怎么做呢，因为为了安全的原因，web端的js是不能读取文件的本地真实路径的，那么只能将图片上传到服务器上，然后再拿到图片的链接，这样才能实现图片预览。而服务器呢，比如有两个文件夹，一个是临时文件夹，一个是正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

1. fileReader

现在html5提供的API不再让图片预览那么麻烦，FileReader提供了很多的方法来进行图片预览和文本读取，同时也提供了一整套完整的事件来捕获文件的状态，如下：

FileReader接口的方法 FileReader接口有4个方法，其中3个用来读取文件，另一个用来中断读取。无论读取成功或失败，方法并不会返回读取结果，这一结果存储在result属性中。

方法名	参数	描述
readAsBinaryString	file	将文件读取为二进制编码
readAsText	file[, encoding]	按照格式将文件读取为文本，encode默认为UTF-8
readAsDataURL	file	将文件读取为DataUrl
abort	(none)	终端读取操作