今天写码遇到的一个需求是在页面中上传文件时,
只选择文件,并未上传,即在前端判断文件大小,
如果文件过大,则提示用户重新选择文件。
原本判断文件大小的思路,是使用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~~
分享到:
相关推荐
根据提供的文件信息,“HTML5高级程序设计”似乎是一份关于HTML5基础知识的学习文档。下面将对这份文档可能涉及的关键知识点进行详细的阐述。 ### HTML5概述 1. **定义与历史**: - HTML5是超文本标记语言...
标题中的“基于Bootstrap.3的文件上传效果, 可拖拽上传、预览的HTML5文件上传插件.zip”指的是一个使用Bootstrap 3框架和HTML5技术实现的高级文件上传功能。这个插件允许用户通过拖放操作上传文件,并且在上传前可以...
8. 将这些Blob数据合并成一个文件,可以使用FileReader API读取每个Blob并合并成一个大的ArrayBuffer,再转换回Blob。 9. 最后,可以提供一个下载链接,让用户下载录制的MP3文件。 需要注意的是,虽然HTML5支持MP3...
第2篇 HTML 5高级应用 第11章 HTML 5的新特性 221 视频讲解:6分钟 11.1 谁在开发HTML 5 222 11.2 HTML 5的新认识 222 11.2.1 兼容性 222 11.2.2 实用性和用户优先 222 11.2.3 化繁为简 223 11.3 ...
例如,我们可以使用FileReader对象的`readAsDataURL`方法将图片文件转换为Base64编码的字符串,然后显示在页面上作为预览。这种方法可以实现实时预览,提升用户体验。 CSS在构建图片上传界面时起到美化和布局的作用...
9. **FileReader API**:FileReader提供了读取文件的能力,`readAsText()`方法的第二个参数是编码方式,`onabort`和`onload`分别是中断和读取成功时触发的事件。 10. **Canvas操作**:`clearRect()`方法清除指定...
结合这两者,开发者可以构建出具有原生app体验的Web应用,并实现诸如扫码这样的高级功能。 首先,HTML5中的`<input type="file">`元素的`accept`属性允许我们指定用户可以选择的文件类型,这在调用手机摄像头时非常...
这个插件是利用HTML5的File API中的FileReader接口来实现的,为网页应用提供了强大的本地文件读取能力。 FileReader接口是HTML5文件系统API的一部分,它允许JavaScript读取本地文件,而无需服务器的介入。在多图片...
最后,关于标签"html5 canvas jquery",它们分别代表了HTML5的高级特性(如文件API、Canvas等)、用于在Canvas上绘图的API以及一个常用的JavaScript库。这些技术的结合使得开发者能够在浏览器中实现更丰富的交互功能...
HTML5图片dataURL转换工具是一个基于JavaScript实现的小型应用程序,它允许用户在本地进行图片与dataURL之间的相互...通过学习和理解这个工具的工作原理,我们可以更好地掌握HTML5的高级特性,提升我们的Web开发技能。
FileReader提供了readAsDataURL方法,它可以将文件内容读取为一个数据URL。数据URL是一种表示小文件内容的方式,其格式是"data:[][;base64],<data>"。当读取完成后,触发onload事件,此时可以通过返回的dataURL加载...
在JavaScript中,FileReader接口是HTML5引入的一个重要特性,它允许我们读取文件(比如图片)的内容,而无需将文件实际上传到服务器。本文将详细介绍如何使用FileReader实现图片预览和上传功能。 首先,我们需要...
这个压缩包"html5uploader.rar"很可能包含了该组件的源代码、示例、文档等相关资源。 在HTML5中,File API是一个关键特性,它允许JavaScript直接操作用户选择的本地文件,而无需服务器的介入。通过File API,我们...
在这个源码中,我们可能会看到如何使用`drawImage()`方法加载和显示图片,以及如何通过`fillRect()`、`strokeRect()`等方法来绘制红包的形状和边框。 其次,为了实现红包飘落的效果,开发者可能会使用到Canvas的`...
在前端,我们可以利用`FileReader`对象的`slice()`方法来切割文件,计算每个块的MD5值,这个MD5值用于验证文件的完整性。 在描述中提到,前端代码将计算每一块的MD5值。MD5是一种广泛使用的哈希函数,能够将任意...
HTML5是一种先进的网页开发技术,它为网页开发者提供了丰富的功能和强大的工具,使得创建...无论是作为程序员向女朋友表达心意的方式,还是作为一个学习HTML5高级特性的实践案例,这个3D相册都值得我们去研究和探索。
这个插件利用HTML5的File API、Canvas以及WebGL技术,实现了用户在手机上选择图片、预览、裁剪并保存的操作。以下是对该知识点的详细解释: 1. **HTML5 File API**:File API是HTML5标准的一部分,它提供了读取、...
4. 图片预览:在用户选择图片后,我们可以使用FileReader的readAsDataURL方法读取图片为Base64编码的URL,然后将其设置为img标签的src属性,实现图片的即时预览。 5. 图片大小限制与格式检查:在用户上传图片前,...
这个案例中,我们展示了如何使用HTML5的File控件配合.NET服务实现文件上传。从用户选择文件,到预览、读取文件内容,再到通过Ajax发送POST请求,最后在.NET后端接收并保存文件,整个流程涵盖了前端到后端的关键步骤...
"HTML5实现手机端图片上传裁剪特效源码.zip"这个压缩包文件就是为了解决这个问题而提供的资源。 首先,我们要理解HTML5中的File API,这是实现图片上传的基础。File API允许网页直接访问用户的本地文件系统,用户...