HTML5中File
一 File对象与FileList对象
当将input元素的type类型设置为file时，web页面上会显示一个选择文本按钮和一个文本显示框，单击文件按钮可以选择一个文件，文本显示框中会显示选中的文件名称。
input元素设置multiple属性，可以选择多个文件，文本显示框中会显示选中了几个文件。
在这个过程中，用户选中的每一个对象都是一个file对象，用户选中的对个对象的集合就是fileList对象。File对象有两个属性，name属性表示文件名，但不包含文件的路径；
lastModifiedDate属性表示文件的最后修改的日期。
multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript"> function show(){
var file,filelist,mySpan;
file=document.getElementById("file");
filelist=file.files;
mySpan=document.getElementById("mySpan");
var names="";
for(var i=0;i<filelist.length;i++){
names+=filelist[i].name+"<br />"; }
mySpan.innerHTML=names;
}
</script>
</head>
<body>
<input type="file" id="file" multiple />
<input type="button" onclick="show();" value="上传文件" /><br />
<span id="mySpan">文件名字</span>
</body>
</html>
二FileReader对象：读取文件里面的数据
FileReader对象用于读取文件里面的数据，并将这些数据读入内存。根据文件类型，可以选择不同的读取文件，并在异步读取文件的过程中触发多个事件。
1.FileReader对象
HTML5中的FileReader对象一共有4个方法，readAsBinaryString以二进制方式读取文件，readAsText以文本方式读取文件，readAsDateURL以DateURL方式读取文件，abort方法是中断读取操作。FileReader对象有一个result属性，用于存储读取文件的结果。
2.fileReader对象的事件
FileReader对象在异步读取文件时会触发很多事件，根据不同的事件处理不同的操作，可以使程序更加人性化和健壮。
3.以二进制方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.1</title>
<script language="javascript">
//以二进制方式读入文件
function fileBinary()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
var reader=new FileReader();
//以二进制方式读入文件
reader.readAsBinaryString(file);
reader.onload =function(e)
{
myDiv.innerHTML=this.result;
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileBinary();" value="二进制读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
4.以文本的方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.2</title>
<script language="javascript">
//以文本方式读取文件
function fileText()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
var reader=new FileReader();
//以文本方式读取文件
reader.readAsText(file);
reader.onload=function(e)
{
myDiv.innerHTML=this.result;
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileText();" value="文本读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
5.以DateURL方式读取文件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>7.3.3</title>
<script language="javascript">
//以DataURL方式读取文件
function fileDataURL()
{
var myDiv=document.getElementById("myDiv");
//判断浏览器是否支持FileReader
if(typeof FileReader=="undefined")
{
myDiv.innerHTML="<h2>您的浏览器不支持FileReader！</h2>";
return false;
}
var file=document.getElementById("file").files[0];
//判断文件类型
if(!/image\/\w+/.test(file.type))
{
myDiv.innerHTML="<h2>请选择图像文件！</h2>";
return false;
}
var reader=new FileReader();
//以DataURL方式读取文件
reader.readAsDataURL(file);
reader.onload=function(e)
{
myDiv.innerHTML="<img src='"+this.result+"' />";
}
}
</script>
</head>
<body>
<input type="file" id="file" />
<input type="button" onClick="fileDataURL();" value="DataURL读取文件" />
<div id="myDiv" name="myDiv"></div>
</body>
</html>
三.FileSystem对象
1.FileSystem对象介绍
FileSystem的主要功能有以下三个方面
①读取和处理文件：file/Blob、FileList、FileReader。
②创建和写入：BlobBuilder、FileWriter
③目录和文件系统访问：DirectoryReader、FileEntry/DirectoryEntry、LocalFileSystem。
2.请求文件系统
基于安全原因，Web应用通过浏览器的脚本去操作本地文件，首先需要获取操作许可，否则通过浏览器可以随意修改本地文件的是非常不安全的。通过调用Window.requestFileSystem()方法可以请求对文件系统的访问权限。
Window.requestFileSystem()方法需要4个参数，各参数的含义如下所示：
①type文件存储是否应该持久。如果设置为window.TEMPORARY,当浏览器需要更多空间时可自行决定是否删除该文件；如果设置为window.PERSISTENT,则需要获取用户或应用的明确授权才可以删除。
②size指定请求文件的大小，以字节为单位。
③successCallback 当文件系统请求成功后的回调函数，参数为FileSystem对象。
④errorCallback 当文件系统请求失败或错误时的回调函数，参数为FileError对象。
注意 ：首次调用window.requestFileSystem()对象时，系统为应用创建一个沙箱文件，并为其指定一个名称。
HTML5中File的更多相关文章
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- 【javascript】html5中使用canvas编写头像上传截取功能
[javascript]html5中使用canvas编写头像上传截取功能 本人对canvas很是喜欢,于是想仿照新浪微博头像上传功能(前端使用canvas) 本程序目前在谷歌浏览器和火狐浏览器测试可用 ...
- HTML5中的二进制大对象Blob（转）
HTML5中的Blob对象和MYSQL中的BLOB类型在概念上是有点区别的.MYSQL中的BLOB类型就只是个二进制数据容器.而HTML5中的Blob对象除了存放二进制数据外还可以设置这个数据的MIN ...
- html5中关于input使用方法的改变
測试环境:Firefox 10.0.Safari 5.1.Opera 11.61, Chrome 14.0.835.202 自己測试的时候都有写在form表单里,有提交button验证.由于对博客使用 ...
- html5 文件系统File API
前言: 在做浏览器上传图片的时候,一般采用form表单上传,这种上传无法预览图片,无法查看图片大小,无法知道图片的类型等等!那么在html5 File API提供了这些表单无法实现的功能,而且还支持拖 ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- 认识HTML5中的新标签与新属性
前端之HTML5,CSS3(一) HTML5中常用内容标签 header标签 header标签定义文档的页眉,基本语法:<header>content</header>. na ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- html5中input的type类型有哪些（总结）
html5中input的type类型有哪些(总结) 一.总结 一句话总结:时间.颜色.(邮件.电话.url).(数字.数字范围).搜索search 二.html5中input的type类型 值 描述 ...
随机推荐
- Division
Description Write a program that finds and displays all pairs of 5-digit numbers that between them ...
- 商业研究(20)：滴滴出行，进军海外包车?与OTA携程和包车创业公司，共演“三国杀”？看看分析师、投资人和权威人士等10个人的观点碰撞
小雷友情提示:创业有风险,投资需谨慎. 前一篇文章,在探讨境外游创业公司-皇包车和易途8的时候,提到"滴滴如果进军海外包车,为海外华人提供打车和包车服务,有较大可能对海外包车公司 ...
- Shrio Demo
package com.atguigu.shiro.helloworld; import org.apache.shiro.SecurityUtils; import org.apache.shiro ...
- Windows Server 2008 R2 Enterprise 安装.NET Framework 4.0
由于服务器上没有.NET 4.0 部署不了 4.0及以上版本的网站,所以给他安排一下: 复制下好的.NET Framework 4.0到服务器开始安装: 安装完,重新打开IIS,已经 ...
- Jackson入门
Jackson 框架,轻易转换JSON Jackson可以轻松的将Java对象转换成json对象和xml文档,同样也可以将json.xml转换成Java对象. 前面有介绍过json-lib这个框架,在 ...
- Webdriver测试脚本1（打开网页并打印标题）
案例: 启动火狐浏览器 首页打开博客园页面,打印网页标题,等待3秒 打开百度首页,打印网页标题,再等待2秒 关闭浏览器 from selenium import webdriver from time ...
- hdu 3943 经典数位dp好题
/* 题意:求出p-q的第j个nya数 数位dp,求出p-q的所有nya数的个数很好求,但是询问求出最终那个第j个值时是我不会求了看了下别人的思路 具体就是把p-q的第j个转化成0-q的第low+j个 ...
- Python模块基础
概念: 在Python中,一个.py文件就称之为一个模块(Module) 好处: 1. 提高可维护性 2. 可重用 3. 避免函数名.变量名冲突. 每个模块有独立的命名空间,因此相同名字的函数和变量完 ...
- 解方程（codevs 3732）
题目描述 已知多项式方程: a0+a1x+a2x^2+..+anx^n=0 求这个方程在[1, m ] 内的整数解(n 和m 均为正整数) 输入输出格式 输入格式: 输入文件名为equation .i ...
- [bzoj1430]小猴打架_prufer序列
小猴打架 bzoj-1430 题目大意:题目链接. 注释:略. 想法: 我们发现打架的情况就是一棵树. 我们只需要把确定树的形态然后乘以$(n-1)!$表示生成这棵树时边的顺序. 一共$n$个节点我们 ...