HTML5拖放文件上傳詳解：客戶端文件處理與異步服務(wù)器上傳

核心要點(diǎn)

• HTML5支持將文件拖放到網(wǎng)頁元素上，並在JavaScript中分析已拖放的文件，在客戶端加載和解析文件，使用XMLHttpRequest2異步將文件上傳到服務(wù)器，並在上傳過程中顯示圖形進(jìn)度條。
• 由於使用了最新的HTML5技術(shù)，瀏覽器支持可能參差不齊。當(dāng)前版本的Firefox和Chrome支持所有功能，而Opera、IE和Safari的支持有限或根本不支持。
• 要啟用文件拖放，必須將JavaScript事件附加到文件輸入元素和#filedrag元素。還應(yīng)顯示#filedrag元素並隱藏表單提交按鈕。
• W3C文件API提供了一些用於文件操作的對象，包括FileList、File和FileReader，它們分別允許表示所選文件的數(shù)組、單個(gè)文件以及用於在客戶端讀取文件數(shù)據(jù)並在JavaScript中使用它的接口。

將桌面文件拖放到瀏覽器中是Web應(yīng)用程序集成的最終目標(biāo)之一。這是由四部分組成的系列文章的第一部分，介紹如何：1. 啟用將文件拖放到網(wǎng)頁元素上；2. 在JavaScript中分析已拖放的文件；3. 在客戶端加載和解析文件； 4. 使用XMLHttpRequest2異步將文件上傳到服務(wù)器；5. 在上傳過程中顯示圖形進(jìn)度條；6. 使用漸進(jìn)增強(qiáng)確保文件上傳表單在任何瀏覽器中都能工作（對於所有IE6粉絲來說都是好消息！）；7. 使用純JavaScript代碼而無需庫。

瀏覽器兼容性挑戰(zhàn)

在開始之前，本教程涉及一些最新的HTML5技術(shù)，因此預(yù)計(jì)支持情況會參差不齊。代碼現(xiàn)在可以工作，但API可能會發(fā)生變化，瀏覽器也會不斷發(fā)展。 - 最新版本的Firefox和Chrome支持所有功能，並且運(yùn)行完美。 - Opera可以在JavaScript中解析文件，但未實(shí)現(xiàn)文件拖放和XMLHttpRequest2上傳。 - IE和Safari的桌面版不支持任何API。 - Apple已在Safari的iPhone和iPad版本上禁用了HTML文件上傳表單。 有人知道為什麼嗎？

最後，請注意，我的代碼顯示了基本概念。錯(cuò)誤檢查很少，您需要針對生產(chǎn)系統(tǒng)進(jìn)行調(diào)整。

HTML和CSS

這是一個(gè)帶有文件輸入類型的標(biāo)準(zhǔn)表單。唯一的HTML5功能是“multiple”屬性，它允許用戶選擇任意數(shù)量的文件。我們將文件上傳到運(yùn)行PHP的服務(wù)器，但無論您使用什麼技術(shù)，代碼都差不多。隱藏的MAX_FILE_SIZE值指定300,000字節(jié)——PHP使用此值，但我們也會在客戶端檢查它以防止上傳大型文件。

<fieldset><legend>HTML文件上傳</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">選擇要上傳的文件：</label>
  <div id="filedrag">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

filedrag元素將用作我們的文件拖放位置。該元素在CSS中是隱藏的，但如果支持拖放，它將在JavaScript中啟用：

#filedrag {
    display: none;
    font-weight: bold;
    text-align: center;
    padding: 1em 0;
    margin: 1em 0;
    color: #555;
    border: 2px dashed #555;
    border-radius: 7px;
    cursor: default;
}

#filedrag.hover {
    color: #f00;
    border-color: #f00;
    border-style: solid;
    box-shadow: inset 0 3px 4px #888;
}

我們還定義了一個(gè).hover類，當(dāng)用戶將文件拖到元素上時(shí)，該類會更改樣式。瀏覽器在這種情況下不會應(yīng)用:hover樣式，但是當(dāng)事件發(fā)生時(shí)，我們可以使用JavaScript添加類。

文件API

W3C文件API提供了一些對象。我們將使用：- FileList：表示所選文件的數(shù)組。 - File：表示單個(gè)文件。 - FileReader：一個(gè)接口，允許我們在客戶端讀取文件數(shù)據(jù)並在JavaScript中使用它。

附加JavaScript事件

是時(shí)候開始使用一些JavaScript了。我們沒有使用JavaScript庫，因此，為了節(jié)省我們的打字手指，我們將創(chuàng)建幾個(gè)輔助函數(shù)來通過ID返回元素並輸出狀態(tài)消息：

// 通過ID獲取元素
function $id(id) {
    return document.getElementById(id);
}

// 輸出信息
function Output(msg) {
    var m = $id("messages");
    m.innerHTML = msg + m.innerHTML;
}

我們現(xiàn)在將檢查File API是否可用並調(diào)用Init()函數(shù)：

// 調(diào)用初始化文件
if (window.File && window.FileList && window.FileReader) {
    Init();
}

// 初始化
function Init() {

    var fileselect = $id("fileselect"),
        filedrag = $id("filedrag"),
        submitbutton = $id("submitbutton");

    // 文件選擇
    fileselect.addEventListener("change", FileSelectHandler, false);

    // XHR2是否可用？
    var xhr = new XMLHttpRequest();
    if (xhr.upload) {

        // 文件拖放
        filedrag.addEventListener("dragover", FileDragHover, false);
        filedrag.addEventListener("dragleave", FileDragHover, false);
        filedrag.addEventListener("drop", FileSelectHandler, false);
        filedrag.style.display = "block";

        // 移除提交按鈕
        submitbutton.style.display = "none";
    }

}

Init()函數(shù)：1. 為文件輸入元素設(shè)置“change”事件監(jiān)聽器。 2. 顯示#filedrag元素。 3. 設(shè)置“dragover”和“dragleave”事件監(jiān)聽器以更改#filedrag元素的樣式。 4. 為#filedrag元素設(shè)置“drop”事件監(jiān)聽器。 5. 隱藏表單提交按鈕——因?yàn)槲覀儗⒎治龊蜕蟼魉x文件，所以不需要它。

可以選擇在支持文件拖放時(shí)隱藏文件輸入元素。就我個(gè)人而言，我更喜歡同時(shí)提供這兩種選項(xiàng)，因?yàn)橥戏艜硪恍┛捎眯詥栴}。 XMLHttpRequest.upload方法檢查可以防止Opera中的問題。瀏覽器支持File、FileList和FileReader，但不支持拖放事件或XMLHttpRequest2。因此，它可以顯示文件信息，但我們不想顯示#filedrag元素或移除提交按鈕。

文件拖放樣式更改

很少有人在Web瀏覽器中體驗(yàn)過文件拖放。事實(shí)上，經(jīng)驗(yàn)豐富的Web用戶可能認(rèn)為這是不可能的。因此，我們使用了一個(gè)聲明“將文件拖放到此處”的元素。我們還希望通過更改其樣式來指示何時(shí)將文件拖放到#filedrag位置：

// 文件拖放懸停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}

分析已拖放或已選擇的文件

無論使用“瀏覽”選擇一個(gè)或多個(gè)文件還是將文件拖放到#filedrag位置，我們都使用相同的FileSelectHandler()函數(shù)：

// 文件選擇
function FileSelectHandler(e) {

    // 取消事件和懸停樣式
    FileDragHover(e);

    // 獲取FileList對象
    var files = e.target.files || e.dataTransfer.files;

    // 處理所有File對象
    for (var i = 0, f; f = files[i]; i++) {
        ParseFile(f);
    }

}

該函數(shù)：1. 調(diào)用FileDragHover()以移除懸停樣式並取消瀏覽器事件。這至關(guān)重要，否則瀏覽器可能會嘗試顯示文件。 2. 獲取FileList對象。這將來自文件輸入框（e.target.files）或#filedrag元素（e.dataTransfer.files）。 3. 最後，該函數(shù)循環(huán)遍歷FileList中的所有File對象，並將其作為參數(shù)傳遞給ParseFile()函數(shù)……

<fieldset><legend>HTML文件上傳</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple">
  <label for="fileselect">選擇要上傳的文件：</label>
  <div id="filedrag">或?qū)⑽募戏诺酱颂?lt;/div>
</div>
<input type="submit" value="上傳文件" id="submitbutton">
</fieldset>
<div id="messages">狀態(tài)信息</div>

該函數(shù)使用File對象提供的三個(gè)主要只讀屬性輸出信息：-.name：文件名（不包含路徑信息）-.type：MIME類型，例如image/jpeg、text/plain等-.size ：文件大?。ㄒ宰止?jié)為單位）。

請?jiān)贔irefox、Chrome或Opera中查看演示頁面（無拖放支持）。您還可以下載文件以檢查代碼。我們已經(jīng)涵蓋了很多內(nèi)容。在我的下一篇文章中，我們將了解如何使用HTML5和JavaScript打開已拖放的文件……本文也已翻譯成亞美尼亞語如果您喜歡閱讀這篇文章，您會喜歡Learnable；在大師那裡學(xué)習(xí)最新技能和技術(shù)的場所。會員可以立即訪問所有SitePoint的電子書和交互式在線課程，例如面向現(xiàn)實(shí)世界的HTML5和CSS3。 本文的評論已關(guān)閉。您有關(guān)於HTML5的問題嗎？為什麼不在我們的論壇上提問呢？ 關(guān)於HTML5文件拖放的常見問題解答（FAQ）*

(以下FAQ部分由於篇幅過長，已省略。 如果需要，可以單獨(dú)請求FAQ部分的翻譯。)

以上是如何使用HTML5文件拖放的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！