吾知网

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 7669|回复: 0
打印 上一主题 下一主题

HTML5之File API(一)

[复制链接]
跳转到指定楼层
楼主
发表于 2015-11-16 13:10:39 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

转载于:http://hushicai.sinaapp.com/blog/post/24点击打开链接

【关于这个话题,网上已经有很多精华博客,发表博文,记录所学,扫盲的,仅供参考,转载请注明来源。】


         在做web文件上传时,如果是单文件上传,我们一般可以采用form表单的形式来上传文件。

这种做法用户体验非常的差,我们无法在客户端对用户选取的文件进行validate,无法读取文件大小,无法判断文件类型,无法预览等。。。

如果是多文件上传,js更是回天乏力,虽然也不是不能用js + iframe来模拟,但是很麻烦。。。

但现在有了html5,一切都不同!

html5提供了File API,允许js读取本地文件,但并不能直接访问本地文件,而是要依赖于用户行为,比如用户在type='file'控件上选择了某个文件或者用户将文件拖拽到浏览器上。

一、File Api 浏览器支持检测

         File Api给js提供了以下几个接口来访问本地文件系统“:

1、File- 单个文件;提供了诸如name、file size、mimetype等只读文件属性。

2、FileList- 一个类数组File对象集合;

3、Blob - 文件对象的二进制原始数据;

File API还提供了一个异步读取文件的接口 - FileReader。

[javascript] view plaincopy


  • if(window.File && window.FileReader && window.FileList && window.Blob) {  
  •     document.write("Great success! All the File APIs are supported.");  
  • } else {  
  •     document.write('The File APIs are not fully supported in this browser.');  
  • }  

单击此处检测浏览器的支持情况>>
File API主要是用来获取本地文件系统中文件的reference,通过File API我们可以获得一个代表本地文件的js对象,而FileReader通过该File对象即可异步地读取本地文件的内容。二、form表单的file控件

        在html5中,file控件支持选择多个文件,用户选择了某些文件之后,html5为我们提供了一个访问这些文件的对象 - FileList,这是一个类数组集合,每一个元素为一个File对象,File对象中包含了文件的所有可访问信息。

示例的HTML代码如下:

[html] view plaincopy


  • <input type="file" id="Files" name="files[]" multiple />  
  • <div id="Lists"></div>  


multiple属性指明了该file控件可进行多选操作。

js代码如下:

[javascript] view plaincopy


  • function fileSelect(e) {  
  •     e = e || window.event;  
  •       
  •     var files = e.target.files;  //FileList Objects      
  •     var output = [];  
  •       
  •     for(var i = 0, f; f = files; i++) {  
  •         output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');  
  •     }  
  •       
  •     document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';  
  •    
  • }  
  •    
  • if(window.File && window.FileList && window.FileReader && window.Blob) {  
  •     document.getElementById('Files').addEventListener('change', fileSelect, false);  
  • } else {  
  •     document.write('您的浏览器不支持File Api');  
  • }  


  由以上代码可以看到,html5为file这个dom元素新增了files接口(e.target指向了file input元素,实际上也可以用this来访问,即this.files),得到的就是FileList,通过遍历该集合,即可访问到各个已选择的文件对象。

NOTE:File对象还提供了文件的lastModifiedDate属性,不过测试了一下,火狐不支持。

单击此处查看demo>>

除了可以通过表单file控件访问本地文件外,还可以通过拖放API来访问。

三、Drag And Drop API

         html5还提供了一个更快捷的方式来触发读取文件的时机,前面我们已经说过,浏览器不能主动地访问本地操作系统,只能依赖于用户行为,用户想要访问文件时,才去访问本地文件系统。

         拖放API能做的事情很多,在这里我只介绍一下它在访问本地文件方面的功能。

示例代码:

[javascript] view plaincopy


  • function fileDrop(e) {  
  •     e = e || window.event;  
  •       
  •     e.stopPropagation(); // 阻止冒泡  
  •     e.preventDefault();  //阻止默认行为  
  •       
  •     var files = e.dataTransfer.files;   //FileList  
  •       
  •     var output = [];  
  •       
  •     for(var i = 0, f; f = files; i++) {  
  •         output.push('<li><strong>' + f.name + '</strong>(' + f.type + ') - ' + f.size +' bytes</li>');  
  •     }  
  •       
  •     document.getElementById('Lists').innerHTML = '<ul>' + output.join('') + '</ul>';  
  • };  
  •    
  • function dragOver(e) {  
  •     e = e || window.event;  
  •       
  •     e.stopPropagation();  
  •     e.preventDefault();  
  •     e.dataTransfer.dropEffect = 'copy'; //指定拖放视觉效果  
  • };  
  • var d = document.getElementById('DropZone');  
  •    
  • try {  
  •     d.addEventListener('dragover', dragOver, false);  
  •     d.addEventListener('drop', fileDrop, false)  
  • } catch(ex) {  
  •     document.write('something must be wrong!');  
  • }  


由以上代码可以看到,拖放api是以event对象的dataTransfer对象作为数据载体,该对象具有一个files属性,通过该属性,可以拿到我们想要的FileList集合。

点击此处查看拖放api示例>>

后面将介绍FileReader,通过它具体地读取文件内容。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|吾知网 ( 粤ICP备13013563号-1 )

GMT+8, 2024-11-1 06:50 , Processed in 1.097698 second(s), 10 queries , Memcache On.

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表