File对象
来源:互联网 发布:ubuntu怎么连接服务器 编辑:程序博客网 时间:2024/05/21 23:10
原文:http://blog.csdn.net/zhu1988renhui/article/details/7936498
【关于这个话题,网上已经有很多精华博客,发表博文,记录所学,扫盲的,仅供参考,转载请注明来源。】
在做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。
单击此处检测浏览器的支持情况>>File API主要是用来获取本地文件系统中文件的reference,通过File API我们可以获得一个代表本地文件的js对象,而FileReader通过该File对象即可异步地读取本地文件的内容。
二、form表单的file控件
在Html5中,file控件支持选择多个文件,用户选择了某些文件之后,html5为我们提供了一个访问这些文件的对象 - FileList,这是一个类数组集合,每一个元素为一个File对象,File对象中包含了文件的所有可访问信息。
示例的HTML代码如下:
multiple属性指明了该file控件可进行多选操作。
js代码如下:
由以上代码可以看到,html5为file这个dom元素新增了files接口(e.target指向了file input元素,实际上也可以用this来访问,即this.files),得到的就是FileList,通过遍历该集合,即可访问到各个已选择的文件对象。
NOTE:File对象还提供了文件的lastModifiedDate属性,不过测试了一下,火狐不支持。
单击此处查看demo>>
除了可以通过表单file控件访问本地文件外,还可以通过拖放API来访问。
三、Drag And Drop API
html5还提供了一个更快捷的方式来触发读取文件的时机,前面我们已经说过,浏览器不能主动地访问本地操作系统,只能依赖于用户行为,用户想要访问文件时,才去访问本地文件系统。
拖放API能做的事情很多,在这里我只介绍一下它在访问本地文件方面的功能。
示例代码:
由以上代码可以看到,拖放api是以event对象的dataTransfer对象作为数据载体,该对象具有一个files属性,通过该属性,可以拿到我们想要的FileList集合。
点击此处查看拖放api示例>>
后面将介绍FileReader,通过它具体地读取文件内容。
- File对象
- File对象
- File对象
- File对象
- File对象的路径
- C# File对象[转]
- File Sync 扩展对象
- python - file对象
- File文件对象概述
- File对象(day21)
- JS的File对象
- VBS---File对象
- File对象功能
- html5中file对象
- File对象的创建
- File对象概述
- Java的File对象
- Javascript--File对象
- 匿名委托与Lambda表达式
- 母函数_解释
- 基于 CentOS 使用 Jenkins 实现 Android 持续集成
- HA heartbeat在虚拟机中的实现及其问题
- 使用spring事件驱动机制,实现权限信息的自动收集存库
- File对象
- 总结一下需要复习的知识点
- NSPredicate(谓语),验证邮箱、电话等用法(1)
- Android输入系统简述
- 机器学习笔记(一)
- Java NIO系列教程(五) 通道之间的数据传输
- 随笔
- HDU 6178 Monkeys【dfs】【输入外挂模板】
- Java验证码的编写