html图片查看代码实现,如何用HTML5实现图片预览和查看原图的功能

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

html5实现图片预览和查看原图相对以前容易多了，在以前，为了安全，web端的js是不能读取文件的本地真实路径的，只能将图片上传到服务器上，再取图片的链接，这样才能实现图片预览。而在服务器端，会有两个文件夹，一个临时文件夹，一个正式文件夹，临时文件夹会定时进行清理，正式文件夹是用户确认使用的图片存储的位置。

1. fileReader

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

FileReader的接口

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

方法名

参数

描述

readAsBinaryString

file

将文件读取为二进制编码

readAsText

file[, encoding]

按照格式将文件读取为文本，encode默认为UTF-8

readAsDataURL

file

将文件读取为DataUrl

abort

(none)

终端读取操作

FileReader接口事件

FileReader接口捕获读取文件时的状态对应的事件模型如下。

事件

描述

onabort

中断

on