說明：

本文闡述了如何用HTML5和JavaScript上傳文件。HTML5提供輸入類型“文件”允許我們與本地文件互動，文件輸入類型對于從用戶那提走一些示例并進(jìn)行一些操作來說可能非常有用。我們將在項目中用File API，因此如果你需要任意功能的任何細(xì)節(jié)描述，都可以查看API。它還包含各種其它處理二進(jìn)制文件的方式。我們將使用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ù)；否則，你需要升級瀏覽器。

文件輸入標(biāo)簽

文件輸入標(biāo)簽跟其他HTML的輸入標(biāo)簽一樣，唯一的區(qū)別是“類型”。對于文件類型輸入，我們需要設(shè)置元素類型為“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輸入標(biāo)簽中，添加一個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界面。它為我們提供如下方式來處理文本和二進(jìn)制文件：

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ù)當(dāng)作陣列對象讀取。

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

要讀取文件需添加如下腳本、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);
}

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