关于HTML5的FileReader这个高级货的用法

http://tara1128.iteye.com/blog/1935141

今天写码遇到的一个需求是在页面中上传文件时， 
只选择文件，并未上传，即在前端判断文件大小， 
如果文件过大，则提示用户重新选择文件。 

原本判断文件大小的思路，是使用img元素， 
把文件的URL赋值给img的src，然后通过filesize来拿到文件大小。 
但使用这个方法，必须得到文件的URL，所以还是需要先上传才可以。 

如此，使用HTML5的FileReader接口，即可完全在页面里读取文件了。 

使用方法简述如下： 
Plus：不支持IE，of course，as always…… 

FileReader专门用于读取文件， 
它提供了一些读取文件的方法，以及包含读取结果的事件模型。 
目前只有FF3.6+和Chrome6.0+实现了这个接口。 

首先判断你的浏览器是否支持FileReader接口： 
if( typeof FileReader == "undefined" ){ 
  alert( "您的浏览器不支持FileReader！" );  
}else{ 
  // do FileReader things 
} 

在页面结构里，我们需要给一个input用来上传文件： 
<input type="file" id="File"> 
则在支持FileReader的浏览器里就可以这样写： 
document.getElementById("File").addEventListener("change", readFile, false); 
这是在监听input的change事件，一旦选择了文件，触发了change事件，即刻调用readFile方法。 
besides，如果是上传图片， 
我们在结构里可以再给一个img：<img src=" " id="Img">用来放置上传的图片。 
由此我们也顺便实现了在图片发送之前即显示在页面上的功能。 

现在定义这个关键的readFile方法： 
function readFile(){ 
  var file = this.files[0]; //input 
  if( file.size > 5*1024*1024 ){  //用size属性判断文件大小不能超过5M 
    alert( "你上传的文件太大了！" ) 
  }else{ 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload = function(e){ 
      var res = this.result; 
      $("#Img").attr("src", res); 
    } 
  } 
} 
注意，这里的this.result是把文件转换为base64后的字符串， 
如果是图片，则赋值给img的src即可显示。 

当然也可以用这个base64的字符串长度来大致判断文件大小。 
但要知道，这个base64字符串长度与文件实际大小是有差别的。 
你把这个字符串打印出来看看就知道了。 

————————— 我是搔首弄姿的分割线 ————————— 

刚才使用的是FileReader的一个方法readAsDataURL， 
actually，FileReader有四个方法，三个用来读取文件，一个用来中断读取： 

方法：abort 
参数：无 
作用：中断读取 

方法：readAsBinaryString 
参数：file 
作用：将文件读取为二进制码（打印出来在页面上是一堆乱码，二进制麽！） 

方法：readAsDataURL 
参数：file 
作用：将文件读取为DataURL（本例中用的就是这个方法，result就是文件的base64字符，DataURI） 

方法：readAsText 
参数：file, [optional] in DOMString encoding（第二个参数是文本的编码方式，默认UTF-8） 
作用：将文件读取为文本（读取的结果就是这个文本文件中的内容） 


此外，FileReader还包含了一套完整的事件模型，用来捕获读取文件时的状态： 

事件：onabort 
描述：读取中断时触发 

事件：onerror 
描述：出错时触发 

事件：onload 
描述：文件读取成功完成时触发 

事件：onloadend 
描述：读取完成时触发，不论读取成功还是失败 

事件：onloadstart 
描述：读取开始时触发 

事件：onprogress 
描述：读取中 

文件一旦被读取，不论成功还是失败， 
实例（var reader = new FileReader）的result属性都会被填充。 
如果读取失败，result的值就是null， 
如果读取成功，result的值就是读取的结果。 

Last but not least, FileReader这货是HTML5的， 
所以IE不支持，使用时务必了解。 

咩哈哈~~~over~~