在前面的幾篇文章里，我向大家共享了幾個(gè)HTML5的例子，分別是拖拽功能演示，頁面內(nèi)容可編輯化演示 和 本地存儲(chǔ)功能演示。  今天，我將向大家分享一個(gè)簡單的應(yīng)用，用來演示使用FileReader的方法, FileReader是HTML5里提供的一個(gè)文件操作API。  
　　當(dāng)你在看我前面所寫的HTML 5例子時(shí)，我正在思考創(chuàng)建一個(gè)簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標(biāo)并不是想單純的展示這些HTML 5 API，而是想用例子來告訴開發(fā)人員如何真正的以一種實(shí)用的和創(chuàng)新的方式實(shí)現(xiàn)這些API。
　　在HTML5里，從Web網(wǎng)頁上訪問本地文件系統(tǒng)變的十分的簡單，那就是使用File API。這個(gè)File規(guī)范說明里提供了一個(gè)API來表現(xiàn)Web應(yīng)用里的文件對象，你可以通過編程來選擇它們，訪問它們的信息。這個(gè)File API包括：

• 一個(gè)FileList序列，代表著由本地系統(tǒng)里選中的單個(gè)的文件組成的數(shù)組。用來選擇文件的用戶接口可以通過<input type=”file”>調(diào)用實(shí)現(xiàn)。

• 一個(gè)Blob接口，它代表原始二進(jìn)制數(shù)據(jù)，通過Blob對象你可以訪問里面的字節(jié)數(shù)據(jù)。

• 一個(gè)File接口，它里面存有文件的只讀屬性信息，像文件名，文件類型，文件數(shù)據(jù)訪問的地址。

• 一個(gè)FileReader接口，它提供了讀取一個(gè)文件的方法，和一個(gè)獲取文件讀取結(jié)果的事件模型。

• 一個(gè)FileError接口和一個(gè)FileException對象，它們用來定義這個(gè)規(guī)范中的錯(cuò)誤產(chǎn)生條件。

　　如何使用這個(gè)例子：在這個(gè)例子中，我給出了一個(gè)畫板，你可以從本地文件系統(tǒng)里拖拽進(jìn)去一個(gè)圖片，或者你也可以用文件選擇框來選擇圖片。例子中，請只選擇圖片文件，我并沒有添加文件過濾和文件類型檢查。請記住，沒有一個(gè)瀏覽器完全實(shí)現(xiàn)了HTML5，這個(gè)例子需要在支持HTML5的瀏覽器上運(yùn)行，比如Firefox3.5以上。

　　實(shí)現(xiàn)File API的主要方法非常的簡單，就像下面：

function imagesSelected(myFiles){
  for (var i = 0, f; f = myFiles[i]; i++){
    var imageReader = new FileReader();
    imageReader.onload = (function(aFile){
      return function(e){
        var span = document.createElement(’span‘);
        span.innerHTML = 
     ['<img class="images" src="', e.target.result,'" title="', aFile.name,'"/>'].join(”);
        document.getElementById(‘thumbs’).insertBefore(span, null);
      };
    })(f);
    imageReader.readAsDataURL(f);
  }
}

function dropIt(e){ 
   imagesSelected(e.dataTransfer.files);
   e.stopPropagation(); 
   e.preventDefault();  
}          

        

        
        
      
        
it知識(shí)庫：HTML5 – 一個(gè)訪問本地文件的例子，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。