HTML5 File API
1.File API
一直以来，不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍。File API的宗旨是为web开发人员提供一种安全的方式，以便在客户端访问用户计算机中的文件，并更好的对这些文件进行操作。
HTML5在DOM中为文件输入元素添加了一个files的集合，在通过文件输入字段选择了一个或多个文件时，files集合中将包含一组File对象 ，每个File对象对应着一个文件，每个File对象都有下列只读对象。
name：本地文件系统中的文件名。
size：文件的字节大小
type： 字符串，文件的MIME类型
lastModifiedDate： 文件上一次被修改时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var filesList = document.getElementById("fileList");
filesList.addEventListener('change', function(event) {
var files = event.target.files,
i=0,
len = files.length;
while(i<len){
alert(files[i].name);
i++;
}
});
};
</script>
</head>
<body>
<input type="file" name="fileList" id="fileList" value="" />
</body>
</html>
不过file API的功能不仅仅如此，通过他提供的FIleReader类型甚至还可以读取文件中的数据
FileReader类型实现的是一种异步文件读取机制，方法如下：
1.readAsText（file，encoding） 以纯文本形式读取文件，将读取的文件保存到result属性中。
2.readAsDataURL（file） 读取文件将文件以数据URI的形式保存在result中
3.readAsBinaryString（file） 读取文件并将一个字符串保存在result属性中。字符串中每个字符表示一字节
4.readAsArrayBuffer（file）读取文件并将一个包含文件内容的ArrayBuffer保存在result中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function() {
var filesList = document.getElementById("fileList");
filesList.addEventListener('change', function(event) {
var info ="",
output=document.getElementById("output"),
progress=document.getElementById("progress"),
files = event.target.files,
type= "default",
reader = new FileReader();
if(/image/.test(files[0].type)){
reader.readAsDataURL(files[0]);
type="image";
}else{
reader.readAsText(files[0]);
type="text";
}
reader.error=function(){
output.innerHTML="Could not read file"+reader.error.code;
};
reader.onprogress=function(event){
if(event.lengthComputable){
progress.innerHTML=evnet.loaded+"/"+event.total;
}
};
reader.onload=function(){
var html="";
switch(type){
case "image":
html="<img src=\""+reader.result+"\">";
break;
case "text":
html=reader.result;
break;
}
output.innerHTML = html;
};
});
};
</script>
</head>
<body>
<input type="file" name="fileList" id="fileList" value="" />
<p>output--</p>
<div id="output"></div>
<p>progress--</p>
<div id="progress"></div>
</body>
</html>
这个读取过程是异步的，因此FileReader也提供了几个事件：
1.progress 是否又读取了新数据
2.error 是否发生错误
3.load 是否已经读取完整个文件。
HTML5 File API的更多相关文章
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5 File api 实现断点续传
目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...
- HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
- HTML5 File API 全介绍
在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...
- HTML5 File API的应用
HTML5 File API简介 HTML5File API协议族 Directories and System 文件系统和目录读取 FileWriter 写入文件 FileReader ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...
- HTML5 File API解读
1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File ...
随机推荐
- testlink邮件设置（centos 7）
上一篇文章在centos 7上安装了testlink(CentOS 7下安装xampp和testlink),本篇进行邮件设置,可在进行testlink密码修改.用例指派时进行邮件通知 1.修改conf ...
- MySQL 5.7 for Windows 解压缩版 MySQL 服务无法启动
MySQL 5.7 for Windows 解压缩版配置安装 http://jingyan.baidu.com/article/f3ad7d0ffc061a09c3345bf0.html basedi ...
- asp.net Mvc+bootstarp+esayUI+EF 框架（一）
"框架" 这两个字从通俗的意义来讲就是提高复用性,解耦类之间的关系和方便开发人员开发. 使用的技术也是大家基本现在都用过的,而这个系类我所要讲的内容是什么呢? 框架的基本 ...
- Network Load Balancing Technical Overview--reference
http://technet.microsoft.com/en-us/library/bb742455.aspx Abstract Network Load Balancing, a clusteri ...
- Ubuntu 12.04 root默认密码？ 如何使用root登录？
在安装Ubuntu 12.04时并没有设置root的密码,登录的时候也没有使用root账户.当我们使用root权限时,一般都使用sudo命令进行.那么当我们安装完毕Ubuntu 12.04时,root ...
- maven搭建个人仓库
Maven环境搭建: 本地仓库+maven运行环境+构建项目 1.搭建nexus 本地仓库 1)拷贝jdk1.6和tomcat62)配置端口为8010 (端口自行定义,只要下面各处一致即可)3)复制n ...
- skynet启动过程_bootstrap
这遍摘自skynet 的wiki skynet 由一个或多个进程构成,每个进程被称为一个 skynet 节点.本文描述了 skynet 节点的启动流程. skynet 节点通过运行 skynet 主程 ...
- nofollow标签如何使用
“nofollow”的意思是不传递权重,向网站站长提供了一种方式,即告诉搜索引擎“不要追踪此网页上的链接”或“不要追踪此特定链接”. nofllow的形式 1.<meta name=" ...
- java 从String中匹配数字，并提取数字
方法如下: private List<FieldList> GetTmpFieldsList(List<String> FieldsList,String tmptableNa ...
- 20151225jquery学习笔记---选项卡UI
圣诞节快乐,哈哈哈....选项卡(tab),是一种能提供给用户在同一个页面切换不同内容的 UI. 尤其是在页面布局紧凑的页面上,提供了非常好的用户体验.一． 使用 tabs使用 tabs 比较简单,但 ...