HTML5 – 一個訪問本地文件的例子

摘要:本文將向大家分享一個簡單的應用,用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API。

在前面的幾篇文章里,我向大家共享了幾個HTML5的例子,分別是拖拽功能演示,頁面內容可編輯化演示 和 本地存儲功能演示。 今天,我將向大家分享一個簡單的應用,用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API。
  當你在看我前面所寫的HTML 5例子時,我正在思考創建一個簡單但又適用的例子、以一種更新奇的方式來演練這些HTML5新特性。我的目標并不是想單純的展示這些HTML 5 API,而是想用例子來告訴開發人員如何真正的以一種實用的和創新的方式實現這些API。

在HTML5里,從Web網頁上訪問本地文件系統變的十分的簡單,那就是使用File API。這個File規范說明里提供了一個API來表現Web應用里的文件對象,你可以通過編程來選擇它們,訪問它們的信息。這個File API包括:

  • 一個FileList序列,代表著由本地系統里選中的單個的文件組成的數組。用來選擇文件的用戶接口可以通過<input type=”file”>調用實現。
  • 一個Blob接口,它代表原始二進制數據,通過Blob對象你可以訪問里面的字節數據。
  • 一個File接口,它里面存有文件的只讀屬性信息,像文件名,文件類型,文件數據訪問的地址。
  • 一個FileReader接口,它提供了讀取一個文件的方法,和一個獲取文件讀取結果的事件模型。
  • 一個FileError接口和一個FileException對象,它們用來定義這個規范中的錯誤產生條件。

如何使用這個例子:在這個例子中,我給出了一個畫板,你可以從本地文件系統里拖拽進去一個圖片,或者你也可以用文件選擇框來選擇圖片。例子中,請只選擇圖片文件,我并沒有添加文件過濾和文件類型檢查。請記住,沒有一個瀏覽器完全實現了HTML5,這個例子需要在支持HTML5的瀏覽器上運行,比如Firefox3.5以上。

實現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 = 
     ['![](', e.target.result,')'].join(”);
        document.getElementById(‘thumbs’).insertBefore(span, null);
      };
    })(f);
    imageReader.readAsDataURL(f);
  }
}

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

(web前端學習交流群:328058344 禁止閑聊,非喜勿進!)
我選擇在<td>上放置我的ondrop事件:

<td align=”left” height=”105″ ondragenter=”return false” 
ondragover=”return false” ondrop=”dropIt(event)”>   
   <output id=”thumbs”></output>
</td>

** 你可以下載這個例子中所有HTML代碼, 點擊下載。  這個例子中,我只是拖拽本地文件到畫板里。然而我想它能向你表明File API的簡單但強大的能力

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,596評論 25 708
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,993評論 19 139
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,779評論 18 399
  • 來到學校了,回顧沿途的一切,貌似很多都是各種嘗試。 第一次自己在閑魚買臺式機 第一次買樹莓派沒玩多久 第一次買ar...
    ketop閱讀 199評論 0 1
  • 從前慢 記得早先少年時 大家誠誠懇懇 說一句...
    練小慧閱讀 278評論 3 0