HTML5 之文件操作(file)
前言
在 HTML 文档中 <input type="file"> 标签每出现一次,一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件。
该元素的 value 属性保存了用户指定的文件的名称,但是当包含一个 file-upload 元素的表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名。
当用户选择或编辑一个文件名,file-upload 元素触发 onchange 事件句柄。
看个简单例子:
- <!-- oscar999 -->
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <meta name="author" content="oscar999">
- <title></title>
- <script>
- function handleFiles(files)
- {
- if(files.length)
- {
- var file = files[0];
- var reader = new FileReader();
- reader.onload = function()
- {
- document.getElementById("filecontent").innerHTML = this.result;
- };
- reader.readAsText(file);
- }
- }
- </script>
- </head>
- <body>
- <input type="file" id="file" onchange="handleFiles(this.files)"/>
- <div id="filecontent"></div>
- </body>
- </html>
这里读取一个文件, 显示在div 中。
(在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 中也能轻松的实现,
看代码:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <meta name="author" content="oscar999">
- <title></title>
- </head>
- <body>
- <div id="dropbox"> Drop Here </div>
- <div id="filecontent"></div>
- <script>
- var dropbox = document.getElementById("dropbox");
- dropbox.addEventListener("dragenter", dragenter, false);
- dropbox.addEventListener("dragover", dragover, false);
- dropbox.addEventListener("drop", drop, false);
- function dragenter(e) {
- e.stopPropagation();
- e.preventDefault();
- }
- function dragover(e) {
- e.stopPropagation();
- e.preventDefault();
- }
- function drop(e) {
- e.stopPropagation();
- e.preventDefault();
- var dt = e.dataTransfer;
- var files = dt.files;
- if(files.length)
- {
- var file = files[0];
- var reader = new FileReader();
- reader.onload = function()
- {
- document.getElementById("filecontent").innerHTML = this.result;
- };
- reader.readAsText(file);
- }
- }
- </script>
- </body>
- </html>
这里通过事件对象的 dataTransfer 可以得到文件。
读取文件内容
在第一个例子中, 我们使用 FileReader类来读取文件的内容,
在 W3C 草案中,File 对象只包含文件名,文件类型等只读属性;FileReader用于内容读取和监控读取状态。
(在firefox 中, 可以直接使用 var fileBinary = file.getAsBinary(); 读取文件的二进制源码)
FileReader提供的方法包括:
1. readAsBinaryString
2. readAsDataURL
3. readAsText
4. abort
.........
以下,举一个 使用 FileReader 将用户选择的图片不通过后台即时显示出来的例子。
- function handleFiles(files){
- for (var i = 0; i < files.length; i++) {
- var file = files[i];
- var imageType = /image.*/;
- if (!file.type.match(imageType)) {
- continue;
- }
- var img = document.createElement("img");
- img.classList.add("obj");
- img.file = file;
- preview.appendChild(img);
- var reader = new FileReader();
- reader.onload = (function(aImg){
- return function(e){
- aImg.src = e.target.result;
- };
- })(img);
- reader.readAsDataURL(file);
- }
- }
同后端的交互
在一般的HTML 中,使用方式是把file input 放在form 中, 以POST 方式把文件传递到后端。
在 HTML5 中, 也可以通过 FileReader 的 readAsBinaryString 方法读取到文件的二进制码,然后通过 XMLHttpRequest 的 sendAsBinary 方法将其发送出去。
- var xhr = new XMLHttpRequest();
- xhr.open("POST", "url");
- xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
- <pre code_snippet_id="422893" snippet_file_name="blog_20140709_4_2106578" class="sh_javascript sh_sourceCode" name="code">xhr<span class="sh_symbol">.</span><span class="sh_function">sendAsBinary</span><span class="sh_symbol">(</span>binaryString<span class="sh_symbol">);</span></pre><br>
参考
浏览器支持
适用于 Firefox 3.6+ ,Chrome ,部分适用于其他支持 HTML 5 接口的浏览器,完全不适用于 IE8 及以下版本
转自 http://blog.csdn.net/oscar999/article/details/37499743
HTML5 之文件操作(file)的更多相关文章
- [JS进阶] HTML5 之文件操作(file)
版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/oscar999/article/details/37499743 前言 在 HTML 文档中 < ...
- HTML5 本地文件操作之FileSystemAPI实例(二)
文件操作实例整理二 1.删除文件.复制文件.移动文件 //获取请求权限 window.requestFileSystem = window.requestFileSystem || window.we ...
- HTML5 本地文件操作之FileSystemAPI实例(一)
文件操作实例整理一 1.请求系统配额类型 console.info(window.TEMPORARY); //0 临时 console.info(window.PERSISTENT); //1 持久 ...
- HTML5 本地文件操作之FileSystemAPI整理(二)
一.文件目录操作 1.DirectoryEntry对象 属性: 1.isFile: 操作对象的是否为文件,DirectoryEntry对象固定其值为false 2.isDirectory: 操作对象是 ...
- HTML5 本地文件操作之FileSystemAPI整理(一)
一.请求配额 DeprecatedStorageInfo对象 window.webkitStorageInfo:当使用持久存储模式时需要用到该对象的接口 方法: 1.requestQuota(type ...
- HTML5 本地文件操作之FileSystemAPI简介
一.FileSystemAPI简介 HTML5的文件操作Api中 1.FileAPI,用于基础的客户端本地文件读取,目前大多数接口已经被主流浏览器支持,点击查看更多参考 2.FileSystemAPI ...
- JAVASE02-Unit06: 文件操作——File 、 文件操作—— RandomAccessFile
Unit06: 文件操作--File . 文件操作-- RandomAccessFile java.io.FileFile的每一个实例是用来表示文件系统中的一个文件或目录 package day06; ...
- c#中@标志的作用 C#通过序列化实现深表复制 细说并发编程-TPL 大数据量下DataTable To List效率对比 【转载】C#工具类:实现文件操作File的工具类 异步多线程 Async .net 多线程 Thread ThreadPool Task .Net 反射学习
c#中@标志的作用 参考微软官方文档-特殊字符@,地址 https://docs.microsoft.com/zh-cn/dotnet/csharp/language-reference/toke ...
- HTML5 本地文件操作之FileSystemAPI实例(四)
目录操作Demo二 1.删除目录 window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSyst ...
随机推荐
- 11G内存设置一例
11G的内存设置参数有memory_target.memory_max_target.sga_target.pga_aggregate_target等. 一个特别繁忙的数据库,前期内存设置较低,物理内 ...
- IOS9.0 之后友盟分享详细过程
一: 申请友盟的AppKey(友盟的Key是根据应用的名称生成的!) 在友盟注册了你自己的开发者账号后就可以申请AppKey了.然后在这个方法里面设置Key - (BOOL)application:( ...
- 纯js实现html转pdf
项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式.简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf.咋不上天呢--查了一下 ...
- 【转】jqGrid学习之介绍
JQGrid JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. ...
- 多线程简介及GCD的使用
多线程简介: 对于任意一个iOS应用,程序运行起来后,默认会产生一个主线程(MainThread),主线程专门用来处理UIKit对象的操作,如界面的显示与更新.处理用户事件触发的操作等等.(记忆这点, ...
- mybatis系列笔记(1)---mybatis入门
mybatis入门 MyBatis是什么? MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了goog ...
- Cloudera Manager安装_搭建CDH集群
2017年2月22日, 星期三 Cloudera Manager安装_搭建CDH集群 cpu 内存16G 内存12G 内存8G 默认单核单线 CDH1_node9 Server || Agent ...
- c风格字符串,字符串字面值,c++字符串
C风格字符串:本质上就是以空字符null为结束符的数组 可以简单的理解为:有'\0'的是c风格字符串,无'\0'的是普通字符数组 字符串字面值:是一串常量字符,字符串字面值常量用双引号括起来的零个或多 ...
- Java使用Schema模式对XML验证
XML允许创作者定义自己的标签,因其灵活的特性让其难以编写和解析.因此必须使用某种模式来约束其结构.目前最流行的这种模式有两种:DTD和SCHEMA,而后者以其独特的优势即将取代DTD模式,目前只是过 ...
- 【js】函数问题
一.函数重载问题: 由于js的函数传入的参数当做arguments对象(和数组类似,但不是Array的实例),传入的参数类型和数量没有限制,没有函数签名,所以如果要实现重载功能 的话,只能是不够完美得 ...