首頁 > web前端 > js教程 > 主體

JavaScript檔案處理第二部分-檔案讀取的範例程式碼分享

黄舟
發布: 2017-03-13 16:49:41
原創
1067 人瀏覽過

在我的前一篇blog中,我介紹了在JavaScript中如何使用文件,具體重點放在如何獲得File物件。只有當使用者透過上傳或拖曳的方式上傳了文件,這些物件才擁有文件的元資料。一旦你有了這些文件,下一步就是從這些文件中讀取資料。

FileReader 類型

FileReader類型有一個單一的工作,就是從一個檔案中讀取資料並儲存在一個JavaScript變數中。它的API有意設計得與XMLHttpRequest相同,因為它們都是從一個外部資源(瀏覽器以外)載入資料。讀取操作是異步的,這樣不會使瀏覽器堵塞。

FileReader可以建立多種格式來表示檔案的數據,而當讀取檔案時傳回的格式是必須的。讀取操作是透過呼叫下面任一方法來完成的:

  • readAsText() – 使用純文字的形式傳回檔案內容

  • readAsBinaryString() – 使用加密二進位資料字串的形式來傳回檔案內容(此方法已廢棄,請使用readAsArrayBuffer()取代)

  • #readAsArrayBuffer() – 使用ArrayBuffer的形式來傳回檔案內容(對二進位資料例如映像檔有用)

  • readAsDataURL() – 使用資料URL的形式傳回檔案內容

像XHR物件的send方法會發起一個Http請求一樣,上面的每個方法都會啟動一個檔案讀取。就這一點來說,在開始讀取之前,你必須監聽load事件,event.target.result總是會傳回讀取的結果。例如:

var reader = new FileReader();
reader.onload = function(event) {
    var contents = event.target.result;
    console.log("File contents: " + contents);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsText(file);
登入後複製

在這個範例中,我們簡單地讀取檔案內容,並將內容以純文字的形式輸出到console。當檔案成功讀取時會呼叫onload操作,而因為某些原因無法讀取時會呼叫onerror操作。在事件處理器中可以透過event.target來取得FileReader實例,而且它推薦這樣使用,而不是直接使用reader變數。 result屬性包含讀取成功時的檔案內容和讀取失敗時的錯誤訊息

讀取資料URI

你可以用差不多的方法將檔案讀取為一個資料URI,資料的URI(有時也叫資料URL)是個有趣的選項,例如你想要顯示從磁碟上讀取的映像文件,你可以用下面的程式碼這樣做:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        img     = document.createElement("img");

    img.src = dataUri;
    document.body.appendChild(img);
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);
登入後複製

這段程式碼簡單地在頁面上插入一個從磁碟上讀取來的映像檔。因為這個數據URI包含了圖像的所有數據,所以它可以直接傳給圖像的src屬性,並顯示在頁面上。你可以交替地加載圖像並將其繪製到一個<<a href="http://www.php.cn/code/7892.html" target="_blank">canvas</a>>上:

var reader = new FileReader();
reader.onload = function(event) {
    var dataUri = event.target.result,
        context = document.getElementById("mycanvas").getContext("2d"),
        img     = new Image();

    // wait until the image has been fully processed
    img.onload = function() {
        context.drawImage(img, 100, 100);
    };
    img.src = dataUri;
};

reader.onerror = function(event) {
    console.error("File could not be read! Code " + event.target.error.code);
};

reader.readAsDataURL(file);
登入後複製

這段程式碼將圖像資料載入到一個新的Image對象,並將其繪製到一個畫布上(寬度和長度都指定為100)。

資料URI一般用來做這個,但能用在任何類型的檔案上。將檔案讀取為一個資料URI最普遍的用法是在web頁面中快速顯示文件內容。

讀取ArrayBuffers

ArrayBuffer類型[1]最初是作為WebGL的一部分被引進的。一個Arraybuffer代表一個有限的位元組數,可以用來儲存任意大小的數字。讀取一個ArrayBuffer資料的方式需要一個特定的視圖,例如Int8Array是將其中的位元組處理為一個有符號的8位元整數集合,而Float32Array是將其中的位元組處理為一個32位元浮點數的集合。這些稱為類型陣列[2],這樣可以強制你工作在一個特定的數字類型上,而不是包含任意類型的資料(像傳統的陣列)。

當處理二進位檔案時你可以優先使用ArrayBuffer,這樣對資料可以有更細緻的控制。要解釋關於ArrayBuffer的所有ins和outs已經超出本blog的範圍,你只需要知道在你需要的時候可以輕鬆地將一個文件讀取為一個ArrayBuffer就可以了。你可以直接傳一個ArrayBuffer到一個XHR物件的send()方法,發送原始資料到服務器(你會在伺服器的請求中讀取這個資料去重建檔案),只要你的瀏覽器完全支援XMLHttpRequest Level 2[3](大部分最新的瀏覽器,包括IE10和Opera12都支援)。


以上是JavaScript檔案處理第二部分-檔案讀取的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板