[JS高级进阶] HTML5 的文件操作
来源:互联网 发布:过山车大亨 mac 编辑:程序博客网 时间:2024/05/18 22:42
[JS高级进阶] HTML5 的文件操作(file)
该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。看个简单例子:
(在IE8 中 无效, this.files 无法读取文件。这个属于html5 的特性)
当选择了一个文件时,就会把包含这个文件的列表(一个FileList对象)作为参数传给handleFiles()函数了。
这个FileList对象类似一个数组,可以知道文件的数目,而它的元素就是File对象了。
从这个File对象可以获取name、size、lastModifiedDate和type等属性。
把这个File对象传给FileReader对象的读取方法,就能读取文件了。
HTML5 Drag and Drop File
HTML5 支持的File 的操作不仅仅是文件的选择,
在HTML5 之前需要使用 Applet 和 SilverLight 才能达到的文件拖拽功能,在HTML5 中也能轻松的实现,
看代码:
这里通过事件对象的 dataTransfer 可以得到文件。读取文件内容
在第一个例子中, 我们使用 FileReader类来读取文件的内容,
在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性;FileReader用于内容读取和监控读取状态。
(在firefox 中, 可以直接使用 var fileBinary = file.getAsBinary(); 读取文件的二进制源码)
FileReader提供的方法包括:
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下,举一个 使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。
同后端的交互
在一般的HTML 中,使用方式是把file input 放在form 中, 以POST 方式把文件传递到后端。在 HTML5 中, 也可以通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。
参考
- W3C File API
- MDC File
- [JS高级进阶] HTML5 的文件操作
- [JS进阶] HTML5 之文件操作(file)
- [JS进阶] HTML5 之文件操作(file)
- js操作文件 HTML5版
- JS进阶高级篇
- SilkTest高级进阶系列2-操作INI文件
- HTML5 进阶系列:文件上传下载
- HTML5 进阶系列:文件上传下载
- HTML5 进阶系列:文件上传下载
- JS中String的高级操作
- html5的进阶demo
- JS-进阶-JS DOM常用的节点操作
- JS html5 操作SQLite
- js高级操作收集
- html5新api对文件的操作
- html5之文件和二进制的操作
- 文件操作进阶篇
- 8.8 shutil--高级的文件操作
- epoll高级应用之同时处理 tcp/udp 的服务器
- C#操作mdb数据库文件
- 转义笔记
- python 归约、合拢、累加 函数
- SpringBoot + Mybatis + thymeleaf 搭建的个人博客
- [JS高级进阶] HTML5 的文件操作
- Nginx配置文件语法高亮方法
- 【Django】框架ajax无法调用后台方法问题
- Hive优化
- xutils2.0网络请求的关键代码
- java为移动端写接口开发实例
- 微服务 Dubbo + Zookeeper 原理解析
- MySql之事务处理详解
- 性能分析系列-cached memory