FileReader

最新推荐文章于 2024-07-26 08:29:23 发布

转载最新推荐文章于 2024-07-26 08:29:23 发布 · 置顶 · 453 阅读

文章标签：

#html5 #前端

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

原本判断文件大小的思路，是使用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用来上传文件：

则在支持FileReader的浏览器里就可以这样写：
document.getElementById(“File”).addEventListener(“change”, readFile, false);
这是在监听input的change事件，一旦选择了文件，触发了change事件，即刻调用readFile方法。
besides，如果是上传图片，
我们在结构里可以再给一个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
描述：读取完成时触发，不论读取成功还是失败