本文摘自PHP中文网,作者PHPzhong,侵删。
最近做项目需要用到图片上传与预览功能,由于是用于手机端,所以研究了下H5的实现方式。
图片预览
首先,解决图片预览问题。在html5中,提供了FileReader来读取本地文件,使我们可以实现图片预览功能。
FileReader
属性,所有属性都是只读的:
FileReader.error,读取文件时,出现的DOMError。
FileReader.readyState,读取状态;0,没有数据加载;1,数据正在加载;2,读取已经完成。
FileReader.result,文件内容;该属性只在读取操作完成后才有效,并且格式取决于读取时使用的方法。
事件:
FileReader.onabort,读取操作中止。
FileReader.onerror,读取出现错误。
FileReader.onload,读取成功完成后。
FileReader.onloadstart,读取开始。
FileReader.onloadend,读取完成,无论是否读取成功。
FileReader.onprogress,当读取Blob内容时。
方法:
FileReader.abort()
中止读取。然后readyState变为2。FileReader.readAsArrayBuffer()
将文件读取成ArrayBuffer。FileReader.readAsBinaryString()
读取成二进制字符串。FileReader.readAsDataURL()
读取成DataURL。FileReader.readAsText()
读取成文本。浏览器兼容性如图:
预览功能实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
效果预览:
上传功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
以上就是通过html5实现图片上传与预览功能的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者