目前是一个小白,刚刚实习,发现需要用到input file 上传以后需要预览 所以去网上找了一下,记录一下,以备不时之需。
这个功能可以通过HTML5 的FileReader()方法来实现。
FileReader是HTML5 File API的一部分。它实现了一种异步文件读取机制。可以把FileReader想象为XMLHttpRequest,区别只是它读取的是文件系统,而不是远程服务器。为了读取文件中的数据,FileReader提供了如下几个方法。
readAsText(file,encoding):以纯文本的方式读取文件,将读取到的文件保存到result属性中。
readAsDataURL(file):读取文件并将文件以数据URI的形式保存在result属性中。
readAsBinaryString(file):读取文件并将一个字符串保存在result属性中,字符串中的每个字符表示一个字节。
readAsArrayBuffer(file):读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。
通过readAsDataURL(file)方法,我们就可以将读取到的图片数据以URI的方式显示在页面中。
首先 我们先看一下 上传之前 预览单张的Html部分
在看一下jQuery部分
运行结果:
我们在记录一下关于多张预览
HTML部分:
jQuery部分:
运行结果:
我个人不喜欢input file后面的地址 所以一般用 “color: transparent”
运行结果:
HTML5 FileReader 可以在 Internet Explorer 10+、FireFox,、Chrome 和Opera浏览器中正常工作。