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;
}
};