HTML5 文件读取
一、定义
- input的file类型会渲染为一个按钮和一段文字。点击按钮可打开文件选择窗口,文字表示对文件的描述(大部分情况下为文件名);file类型的input会有files属性,保存着文件的相关信息。
- FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件。
- 参考文章:FileReader读取文件
二、使用(FileReader的方法)
- readAsArrayBuffer(file) 按字节读取文件内容,结果用ArrayBuffer对象表示
- readAsBinaryString(file)按字节读取文件内容,结果为文件的二进制串
- readAsDataURL(file)读取文件内容,结果用data:url的字符串形式表示(常用,会将文件内容进行base64编码后输出)
- readAsText(file,encoding)按字符读取文件内容,结果用字符串形式表示(常用)
- abort()终止文件读取操作
三、案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件读取</title> </head> <body> <input type="file" class="file" multiple> <img src="" alt="" id="img"> <script> /*由于媒体文件的src属性,可以通过采用网络地址或base64的方式显示, 因此我们可以利用readAsDataURL实现对图片的预览。*/ //获取文件表单元素 var file=document.querySelector(".file"); //选择文件后触发 file.onchange=function(){ //初始化一个文件读取对象 var reader=new FileReader(); //读取文件数据 reader.readAsDataURL(this.files[0]); //读取完毕,相当于加载的过程 reader.onload=function(){ //this.result就是使用base64表示的图片信息 document.querySelector("#img").src=this.result; } } </script> </body> </html>
【转载文章务必保留出处和署名,谢谢!】