HTML 5 关于文件读取学习笔记

HTML 5中File API是HTML 5中一大亮点，可以让我们去读取本地文件。让所有开发者兴叹！通过File API规范提供了多种访问文件接口。

浏览器对HTML 5中File相关接口的支持情况

在使用File API时，可能需要检测浏览器的支持情况，特征检测代码如下：

复制
// 检测浏览器是否支持File API相关接口.
if (window.File && window.FileReader && window.FileList && window.Blob) {
    //支持滴
} else {
    //不支持
    alert('HTML5 File API在您的浏览器里是不完全支持的。');
}
浏览器中File API并不能想读取文件就可以读取文件的，你必须通过用户的行为才能触发文件的读取。比如，进入网页，当用户执行点击操作后，选择文件后，通过File API就可以获取文件的相关信息。支持File API的浏览器有IE10+、FireFox 3.5+、Opera 10.6+、Safari 5+、Chrome和IOS版的Safari及Android版的Webkit、UC ；当然，它们多数并不是完全支持的。

关于File对象的相关说明

在浏览器中，由于安全限制，File对象一般都是通过点击type=file的input表单、HTML 5的拖放API来获取FileList数组、通过在输入框中粘贴时，里面包含了一个或多个File对象。File对象中包含着文件的相关信息，比如文件名，文件大小，文件类型等。

对象类型 描述
File 独立文件对象，主要包含以下属性：name、size、type、lastModifiedDate及slice()方法（可以直接转成对象URL或通过Fil API读取）
FileList File对象的类数组序列(有时文件多选时，会出现)
Blob Blob对象是File类型的父类型，是File对象通过slice()方法读取整个文件的部分数据。Blob类型有两个属性size、type，当然还支持slice()方法
下面对以上属性作以简单介绍：

name:本地文件系统中的文件名
size:文件的大小，以字节为单位
type:文件的MIME类型(字符串)
lastModifiedDate:文件最后修改时间，字符串(仅Chrome支持)
下面是一个简单示例，通过表单File选择文件然后显示文件的相关信息，下面的代码：

HTML 代码：

复制

复制
if(!(window.File && window.FileReader && window.FileList && window.Blob)) {
    alert('您的浏览器不完全支持FileReader API接口，请尝试使用支持HTML 5的浏览器！');
    throw new Error('browser not support File API');
}
 
/**
 * * 解析模板文件
 * @param template  模板字符串
 * @param scope     模板作用域
 * return [string]  解析过后的字符串
 */
function templateParse(template, scope) {
    if(typeof template != "string") return ;
    return template.replace(/