HTMl5 FileReader接口
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>FileReader 实例</title> 5 <link rel="stylesheet" type="text/css" href="../css/main.css"/> 6 <!-- 7 作者：zongbojue@vip.qq.com 8 时间：2014-05-15 9 描述： FileReader接口的方法 10 FileReader接口拥有4个方法，3个用以读取文件， 另一个用来将读取中断 11 readAsBinarySreing 参数 file 将文件读取为二进制码 12 readerAsText 参数 file，[encoding] 将文件读取为文本 13 readerAsDataURL 参数 file 将文件读取为DataURL 14 abort 中断读取操作 15 --> 16 <script language="JavaScript"> 17 var result=document.getElementById('result'); 18 var file=document.getElementById('file') 19 if (typeof FileReader=="undefined") 20 { 21 result.innerHTML="<p>抱歉，你的浏览器不支持 FileReader</p>"; 22 file.setAttribute('disabled',"disabled"); 23 } 24 // 将文件已Data URL形式读入页面 25 function readAsDataURL() 26 { 27 var file=document.getElementById('file').files[0]; 28 29 if(!/image\/\w+/.test(file.type)) 30 { 31 alert("请确保文件为图像类型") 32 return false; 33 } 34 var reader=new FileReader(); 35 reader.readAsDataURL(file); 36 37 reader.onload=function(y) 38 { 39 var result=document.getElementById('result'); 40 //在页面上显示文件 41 result.innerHTML='<img src="'+this.result+'" alt="" />'; 42 } 43 } 44 //读取二进制数据 45 function readAsString() 46 { 47 var file=document.getElementById('file').files[0]; 48 var reader=new FileReader(); 49 reader.readAsBinaryString(file); 50 reader.onload=function(t) 51 { 52 var result=document.getElementById('result'); 53 result.innerHTML=this.result; 54 } 55 } 56 //读取文本形式文件 57 function readAsText() 58 { 59 var file=document.getElementById('file').files[0]; 60 var reader=new FileReader(); 61 reader.readAsText(file); 62 reader.onload=function(f) 63 { 64 var result=document.getElementById('result'); 65 result.innerHTML=this.result; 66 } 67 } 68 </script> 69 </head> 70 <body> 71 <section> 72 <h1>文件上传</h1> 73 <label>请选择一个文件：</label> 74 <input type="file" id="file" /> 75 <input type="button" value="读取图像" onclick="readAsDataURL()" /> 76 <input type="button" value="读取二进制数据" onclick="readAsString()" /> 77 <input type="button" value="读取文本文件" onclick="readAsText()" /> 78 </section> 79 <article name="result" id="result"> 80 <h3>这是图片</h3> 81 </article> 82 </body> 83 </html>
FileReader接口的事件
onabort 数据读取错误时触发
onerror 数据读取错误时触发
onloadstart 数据读取开始时触发
onprogress 数据读取中
onload 数据读取成功完成是触发
onloadend 数据读取完成是触发，无论成功或失败
