說明：

本文闡述了如何用HTML5和JavaScript上傳文件。HTML5提供輸入類型“文件”允許我們與本地文件互動，文件輸入類型對于從用戶那提走一些示例并進行一些操作來說可能非常有用。我們將在項目中用File API，因此如果你需要任意功能的任何細節(jié)描述，都可以查看API。它還包含各種其它處理二進制文件的方式。我們將使用FileList界面來獲取文件清單。用File Reader界面來讀取文件，用File界面來獲取文件屬性等。

檢查支持

因為HTML5還比較新，并非其所有功能都被瀏覽器支持，所以你最好是檢查一下你的瀏覽器支持文件特性如何。要檢查這個，只需將下面的代碼放入你的HTML文件并看看是否得到警告。

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert("File API supported.!");
} else {
alert(‘The File APIs are not fully supported in this browser.’);
}
</script>

如果你得到如下信息，你就可以跟隨講解繼續(xù)；否則，你需要升級瀏覽器。

文件輸入標簽

文件輸入標簽跟其他HTML的輸入標簽一樣，唯一的區(qū)別是“類型”。對于文件類型輸入，我們需要設置元素類型為“file”類，如下所示：

選擇文件

要選擇一個文件，只需點擊你的HTML頁面上的“Choose file（選擇文件）”按鈕并從對話框中選擇一個文件。如果你已經(jīng)啟用多個選擇，你可以選擇多個文件。請參考下圖：

處理選擇的文件

現(xiàn)在我們已經(jīng)有了選中的文件，下一步我們將檢查文件屬性，因此我們將使用File界面。File界面有兩個很重要的屬性，會對我們很有幫助。它們分別是：

readonly attribute DOMString name;
readonly attribute Date lastModifiedDate;

作為attributesindicate的名稱，前一個提供文件名，后一個提供最后修改時間。

要在JavaScript中使用這個界面（從現(xiàn)在開始我們只用腳本），只需如下代碼：

function startRead(evt) {
    var file = document.getElementById(‘file‘).files[0];
    if (file) {
        //  getAsText(file);
        alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
    }
}

現(xiàn)在在你的HTML輸入標簽中，添加一個onchange事件并按如下方法調(diào)用該功能：

<input type=file id=’file’ onchange="startRead()"/>

如果你到現(xiàn)在為止一切正確，你會得到一個類似于下圖的輸出。

添加拖放

到現(xiàn)在，我們通過使用按鈕選擇文件，但為精益求精，我們可以添加一個拖放支持，從而用戶可以拖拽文件來打開它，要實現(xiàn)這個功能需要添加如下腳本到你的腳本中：

function startReadFromDrag(evt) {
    var file = evt.dataTransfer.files[0];
    if (file) {
        //  getAsText(file);
        var fileAttr = "Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate;
        $(‘#draghere’).text(fileAttr);
        alert(fileAttr);

    }
    evt.stopPropagation();
    evt.preventDefault();
}
var dropingDiv = document.getElementById(‘draghere‘);
dropingDiv.addEventListener(‘dragover‘, domagic, false);
dropingDiv.addEventListener(‘drop‘, startReadFromDrag, false);

為了更好的輸出，也添加到HTML和類型代碼中。

<div id="draghere" >Drop files here</div>
#draghere{
  width:300px;
  height:100px;
  background-color:rgba(221,214,155,0.4);
  border:1px dashed black;
  text-align:center;
}

讀取文件內(nèi)容

現(xiàn)在的主要部分是讀取文件內(nèi)容。我們將使用File Reader界面。它為我們提供如下方式來處理文本和二進制文件：

void readAsArrayBuffer(Blob blob);

void readAsText(Blob blob, optional DOMString encoding);

void readAsDataURL(Blob blob);

第三種方式是在數(shù)據(jù)URL形式中讀取文件內(nèi)容時使用的，第二種方式是在讀取基于文本的文件（支持編碼諸如UTF-8和UTF-16）時使用，第一種方式用于將數(shù)據(jù)當作陣列對象讀取。

我們將選擇第二種和第三種方式。

要讀取文件需添加如下腳本、HTML和類型到你的文件中。

<div id="op"></div>
Style
#op{
  width:300px;
  height:300px;
  overflow:auto;
  background-color:rgba(221,214,221,0.3);
  border:1px dashed black;
}
Script
function getAsText(readFile) {
    var reader = new FileReader();
    reader.readAsText(readFile, "UTF-8″);
    reader.onload = loaded;
}
function loaded(evt) {
    alert("File Loaded Successfully");
    var fileString = evt.target.result;
    $("#op").text(fileString);
}

我們所做的是添加div（有一個ID輸出）到我們將要顯示文件文本的地方。在腳本中，getAsText(readfile)主要地創(chuàng)建了新的FileReader對象來讀取文件。然后在下一行，我們用readAsText()來從文件中獲取文本。這是一個異步函數(shù)，所以我們需要在使用文本前等待它完成。我們添加onload事件到讀取器對象從而讓我們在讀取一完成時就能得到通告。讀取完成會調(diào)用已加載的函數(shù)。在其中我們簡單地顯示op div內(nèi)函數(shù)的文本。如果你到現(xiàn)在一切無誤，那么你就完成了。檢查下列輸出。哦，不好意思我忘了提醒你要從所有讀取函數(shù)中取消備注getTextFile()的調(diào)用。

現(xiàn)在讀取一個圖像文件只需要用下列代碼替換你的上述函數(shù)：

function startRead(evt) {
    var file = document.getElementById(‘file‘).files[0];
    if (file) {
        if (file.type.match("image.*")) {
            getAsImage(file);
            alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
        }
        else {
            getAsText(file);
            alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
        }
    }
    evt.stopPropagation();
    evt.preventDefault();
}
function startReadFromDrag(evt) {
    var file = evt.dataTransfer.files[0];
    if (file) {
        if (file.type.match("image.*")) {
            getAsImage(file);
            alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
        }
        else {
            getAsText(file);
            alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
        }
    }
    evt.stopPropagation();
    evt.preventDefault();
}
function getAsImage(readFile) {
    var reader = new FileReader();
    reader.readAsDataURL(readFile);
    reader.onload = addImg;
}
function addImg(imgsrc) {
    var img = document.createElement(‘img‘);
    img.setAttribute("src", imgsrc.target.result);
    document.getElementById("op").insertBefore(img);
}

該代碼并非像咋一看那樣大。它主要包含用之前的方法做了細微改動的樣板式代碼。getAsImage()方式主要將圖像讀取為一個數(shù)據(jù)URL然后將其發(fā)送到“addImg()”。它們創(chuàng)建了一個新的圖像元素并附之于op div上。“File.type.match”用來識別文件類型。檢查下圖中的輸出。