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的更多相关文章

  1. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  2. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  3. HTML5 File api 实现断点续传

    目前市场上大多数的网站的断点上传都是需要安装浏览器插件的,本文就针对高级浏览器的环境下,通过HTML5 File api实现断点上传进行说明 一.实现文件多选 HTML5的<input>新 ...

  4. HTML5 file api读取文件的MD5码工具

    1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

  5. HTML5 File API 全介绍

    在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成一些类 ...

  6. HTML5 File API的应用

    HTML5 File API简介 HTML5File API协议族 Directories and System   文件系统和目录读取 FileWriter   写入文件 FileReader   ...

  7. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  8. 图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

    一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

  9. HTML5 File API解读

    1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File ...

随机推荐

  1. Http协议简单解析及web请求过程

    HTTP协议: HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统. 基于HTTP协议的客户端/服务器请求响应机制的信息交换过程包含下面几个步骤: 1)    ...

  2. 点击modal确定键后删除tr

    做第一个笔记,关于 “书单”.2016-09-03关于一个表格调用modal后,在点击表格中的删除按钮弹出modal,点击确定删除后,将一整行tr 删除的功能. 以下内容为table,表示为某班学生. ...

  3. C# Attribute （上）——Attribute初体验

      原始出处 .作者信息和本声明.否则将追究法律责任.http://liutiemeng.blog.51cto.com/120361/29201 小序:          注意:本次小序颇长而且没什么 ...

  4. C# - 系统类 - Math类

    Math类 ns:System 此类除了提供了最基本的运算功能 还提供了三角.指数.超常的计算 它的所有方法都是静态的 Math类的字段 E 常量e 自然对数底 值为2.71828182845905 ...

  5. 线程间操作无效 progressBar2线程不能被访问

    出现这个问题解决的方法有两种第一种就是使用 // Form1.CheckForIllegalCrossThreadCalls = false;//不对跨线程的调用 使用这个的时候是判断线程是否运行正常 ...

  6. 在Android应用程序使用YouTube API来嵌入视频

    在Android版YouTube播放器API使您可以将视频播放功能到你的Android应用程序.该API允许您加载和播放YouTube视频(和播放列表),并自定义和控制视频播放体验. 您可以加载或暗示 ...

  7. JavaScript入门(5)

    一.什么是数组? 数组是一个值的集合,每一个值都有一个索引号,从0开始,每个索引都有一个相应的值,根据需要添加更多数值. 好比一个团,团里有很多人.如下使用数组存储5个学生成绩: 二.如何创建数组 使 ...

  8. 使用Azure Redis Cache

    通过上一篇博客<Redis Cache 简介>我们已经简单了解了Azure Redis Cache,这里就不过多赘述了. 1.创建Redis Cache 创建Redis Cache之前,我 ...

  9. ios NSHashTable & NSMapTable

    在ios开发中大家用到更多的集合类可能是像NSSet或者NSDictionary,NSArray这样的.这里要介绍的是更少人使用的两个类,一个是NSMapTable,另一个是NSHashTable. ...

  10. 经历：sybase的sql查询，当传递的参数中包含全角空格（\u00a0），查询慢

    今天,我遇到了一个sybase数据库查询的问题.一句简单的sql,但是不知道为什么查询不出来,导致生产生产服务器频频挂掉.吓得我的小心脏砰砰啊. select DISTINCT A.FCIL_CDE ...