H5文件操作API汇总

以前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的web应用依赖了第三方的插件，而不是很独立。 在HTML5标准中，默认提供了操作文件的API让这一切直接标准化。有了操作文件的API，让我们的Web应用可以很轻松的通过JS来控制文件的读取、写入、文件夹、文件等一系列的操作。接下来主要给大家介绍文件读取的几个API。

案例中会出现的一个对象的包装 addEventListener，下面就直接使用。

EventUtil = {
addHandler: function (obj, event, handler) {
if (obj.addEventListener) {
obj.addEventListener(event, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, handler);
} else {
obj['on' + event] = handler;
}
},
removeHandler: function (obj, event, handler) {
if (obj.removeEventListener) {
obj.removeEventListener(event, handler, false);
} else if (obj.detachEvent) {
obj.detachEvent('on' + event, handler);
} else {
obj['on' + event] = null;
}
}
};

File API

File API在表单中的文件输入字段的基础上，又添加了一些直接访问文件信息的接口。H5在DOM中为文件输入元素添加了一个files集合，在通过文本输入字段选择了一或多个文件时，files集合中将包含一组File对象，每个File对象对应着一个文件。每个File对象都有下列只读属性。注意监测的事件： change

• name: 本地文件系统的文件名
• size： 文件的字节大小
• type：字符串，文件的MIME类型。
• lastModifiedDate：字符串，文件上一次被修改的事件
  

  window.onload = function(){
  var filesList = document.getElementById('files-list');
  EventUtil.addHandler(filesList,'change',function(e){
  var files = this.files,
  i = 0,
  len = files.length;
  while(i<len){
  console.log(files[i].name + '('+files[i].type+','+files[i].size +'bytes)');
  console.log('files.name :'+files[i].name );
  console.log('files.type :'+files[i].type );
  console.log('files.size :'+files[i].size );
  console.log('files.lastModifiedDate :'+files[i].lastModifiedDate );// lastModifiedDate 上一次修改文件的时间 chrome实现了这个功能
  i++;
  
  }
  })
  };
  

  <div class="container">	<label>请选择一个文件：</label>
  	<input type="file" id="files-list" multiple/>
  	</div>

  运行结果： 我上传了一个live.js，显示如下面所示：
   

FileReader类型

FlieReader类型实现的是一种异步文件读取机制。可以把FileReader想象成XMLHttpRequest，区别只是它读取的是文件，而不是远程服务器。为了读取文件中的数据，FileReader提供了如下几个方法：

• readAsText(file, encoding):以纯文本的形式读取文件，将读取到的文本保存在result属性中。
• readAsDataURL(file)：读取文件并将文件一数据URI的形式保存在result属性中
• readAsBinaryString(file)(已废弃)：读取文件并将一个字符串保存在result属性中，字符串中的每一个字符表示一字节
• readAsArrayBuffer(file)：读取文件并将一个包含文件内容的ArrayBuffer保存在result属性中。

由于读取过程是异步的，因此FileReader也提供了几个事件。其中最有用的三个事件是progress、error和load，分别表示是否又读取了新数据，是否发生了错误以及是否读完了整个文件。

window.onload = function(){
var input = document.getElementById("file_input");
var result,div;

if(typeof FileReader==='undefined'){
alert('你的浏览器不支持')
//result.innerHTML = "抱歉，你的浏览器不支持 FileReader";
input.setAttribute('disabled','disabled');

}else{
input.addEventListener('change',readFile,false);
}

function readFile(){
for(var i=0;i<this.files.length;i++){

//单词上传只走了一次，触发一次file事件就执行一次，多次上传会走上传数目的图片

//判断上传文件格式
if (!input['value'].match(/.jpg|.gif|.png|.bmp/i)){　
return alert("上传的图片格式不正确，请重新选择")　　　　
}

//声明一个FileReader实例
var reader = new FileReader();
//调用readAsDataURL方法来读取选中的图像文件
reader.readAsDataURL(this.files[i]);

//最后在onload事件中，获取到成功读取的文件内容，并以插入一个img节点的方式显示选中的图片
reader.onload = function(e){
result = '<div id="result"><img src="'+this.result+'" alt=""/></div>';
div = document.createElement('div');
div.innerHTML = result;
document.getElementById('body').appendChild(div); 　//插入dom树 　　
}
}
}
}

slice

File对象支持一个slice()方法以实现读取文件的一部分而不是全部内容，这个方法在FireFox中的实现叫mozSlice()，在chrome中的实现是webkitSlice()，Safiri的5.1及之前的版本不支持这个方法。Slice()方法接收两个参数：起始字节、要读取的字节数。这个方法返回一个Blob实例，Blob是File类型的父类型。Blob 对象是包含有只读原始数据的类文件对象。blob类型有一个size属性和一个type属性，而且它也支持slice()方法，以便进一步切割数据。通过FileReader也可以从Blob中读取数据。

下面是一个通用的函数，可以在不同实践中使用slice()方法：

function blobSlice(blob,startByte,length){
if(blob.slice){
return blob.slice(startByte,length);
} else if(blob.webkitSlice){
return blob.webkitSlice(startByte,length);
} else if(blob.webkitSlice){
return blob.webkitSlice(startByte,length);
} else {
return null;
}
}

Blob 对象中的数据并不一定得是JavaScript 中的原生形式。File 接口基于 Blob，继承了 Blob 的功能,并且扩展支持用户计算机上的本地文件。创建 Blob对象的方法有几种，可以调用Blob() 构造函数，还可以使用一个已有 Blob对象上的slice()方法切出另一个 Blob 对象。想要从用户的文件里获取一个 Blob 对象，请参考File文档。

   常用属性：

    Blob.isClosed   只读 布尔值，指示 Blob.close() 是否在该对象上调用过。 关闭的 blob 对象不可读。

    Blob.size           只读Blob 对象中所包含数据的大小（字节）。

    Blob.type          只读一个字符串，表明该Blob对象所包含数据的MIME类型。如果类型未知，则该值为空字符串。

 常用方法：

    Blob.close()       关闭 Blob 对象，以便能释放底层资源。

    Blob.slice([start[, end[, contentType]]])     返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。【更多】

 

var filesList = document.getElementById('files-list');
EventUtil.addHandler(filesList, "change", function(event){
var info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"),
files = EventUtil.getTarget(event).files,
type = "default",
reader = new FileReader();
blob = blobSlice(files[0],0,32);

if (blob){
reader.readAsText(blob);
reader.onerror = function(){
outpit.innerHTML = 'could not read file,error code is' + reader.error.code;
}
reader.onload = function(){
output.innerHTML = reader.result;
};
} else {
alert('your browser does not support slice()');

}

reader.onerror = function(){
output.innerHTML = "Could not read file, error code is " + reader.error.code;
};

对象URL对象URL也被称为blob URL，指的是引用保存在File或Blob中数据的URL。使用对象URL的好处是可以不必把文件内容读取到JavaScript中而直接使用文件内容。为此，只要在需要文件内容的地方提供对象URL即可。要创建对象URL，可以使用window.URL.createObjectURL()方法，并传入File或Blob对象。这个方法在Chrome中的实现叫window.webkitURL.createObjectURL()，因此可以通过如下函数来消除命名的差异：

function createObjectURL(blob){
if(window.URL){
return window.URL.createObjectURL(blob);
} else if (window.webkitURL) {
return window.webkitURL.createObjectURL(blob);
} else {
return null;
}
}

这个函数的返回值是一个字符串，指向一块内存的地址。因为这个字符串是URL，所以在DOM中也能使用。例如，以下代码可以在页面中显示一个图像文件：

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
var info = "",
output = document.getElementById("output"),
progress = document.getElementById("progress"),
files = EventUtil.getTarget(event).files,
type = "default",
reader = new FileReader();
url = createObjectURL(files[0]);
if(url) {


if (/image/.test(files[0].type)){
output.innerHTML="<img src =\"" + url + "\">"
} else {
output.innerHTML = 'not an image';
}
} else {
output.innerHTML = "your browser doesn't support object URLs";
}
});

reader.onerror = function(){
output.innerHTML = "Could not read file, error code is " + reader.error.code;
};

reader.onprogress = function(event){
if (event.lengthComputable){
progress.innerHTML = event.loaded + "/" + event.total;
}
};