今天写码遇到的一个需求是在页面中上传文件时,
只选择文件,并未上传,即在前端判断文件大小,
如果文件过大,则提示用户重新选择文件。
原本判断文件大小的思路,是使用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~~
分享到:
相关推荐
Html5FileReader文档 Html5FileReader文档 Html5FileReader文档
FileReader文档
HTML5之FILEREADER的使用.pdf
HTML5 FileReader接口学习笔记
主要介绍了JS+HTML5 FileReader对象用法,结合具体实例形式分析了FileReader对象的常用方法及简单使用技巧,需要的朋友可以参考下
前一篇文章介绍了HTML5中的Blob对象(详情戳这里),从中了解到Blob对象只是二进制数据的容器,本身并不能操作二进制,故本篇将对其操作对象FileReader进行介绍。 FileReader FileReader主要用于将文件内容读入内存...
FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据。到目前文职,只有FF3.6+和Chrome6.0+实现了FileReader接口。 1、FileReader接口的方法 FileReader接口有4个...
Filereader与Promise的搭配使用/JavaScript异步回调函数返回值 完美解决!!!!!!! 工作中项目需求:读取用户上传的Excel文件,并将Excel转换为json数据格式,然后上传至后台数据库。 问题点:Filereader中new ...
FileReader testpublic static String fileRead(String filePath){ StringBuilder result = new StringBuilder(); File src = new File(filePath); FileReader fread = null; BufferedReader re = null; ...
javascript HTML5文件上传FileReader API_.docx
纯前端实现图片上传预览(filereader ),HTML5 filereader 实现
本篇文章主要介绍了浅谈HTML5 FileReader分布读取文件以及其方法简介,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
FileReader.js 封装了 HTML5 的 FileReader interface ,使用上更加简单。 浏览器支持: Internet Explorer: 10 Firefox: 10 Chrome: 13 Opera: 12 Safari: partial 标签:FileReader
基于H5的FileReader实现web端读取shp文件,CSV文件,文本文件坐标,并加载到地图上
行阅读器使用 HTML5 文件 API 逐行读取文件。用法用户选择文件后: // Grab a file referencevar file = document . getElementById ( 'my-file-input' ) . files [ 0 ] ;// Create a new instance of the ...
给定一个HTML5 File对象(例如从HTML5拖放),将其转换为可读流。 安装 与npm和 $ npm install filereader-stream 例子 var drop = require ( 'drag-and-drop-files' ) var concat = require ( 'concat-stream' ) ...
文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能。...这个FileReader API 的工作原理和 File API 一样,需要使用input[type=”f
program for reading text file input is text file output is text tile
主要介绍了Html5 FileReader实现即时上传图片功能,因为项目只要求在ie9以上,所以就没有写出ie8的啦,需要的朋友可以参考下