如何使用HTML5文件拖放

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

核心要點

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

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

瀏覽器兼容性挑戰

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

最後，請注意，我的代碼顯示了基本概念。錯誤檢查很少，您需要針對生產系統進行調整。

HTML和CSS

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

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple>
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div></code>

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

<code class="language-css">#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;
}</code>

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

文件API

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

附加JavaScript事件

是時候開始使用一些JavaScript了。我們沒有使用JavaScript庫，因此，為了節省我們的打字手指，我們將創建幾個輔助函數來通過ID返回元素並輸出狀態消息：

<code class="language-javascript">// 通过ID获取元素
function $id(id) {
    return document.getElementById(id);
}

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

我們現在將檢查File API是否可用並調用Init()函數：

<code class="language-javascript">// 调用初始化文件
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";
    }

}</code>

Init()函數：1. 為文件輸入元素設置“change”事件監聽器。 2. 顯示#filedrag元素。 3. 設置“dragover”和“dragleave”事件監聽器以更改#filedrag元素的樣式。 4. 為#filedrag元素設置“drop”事件監聽器。 5. 隱藏表單提交按鈕——因為我們將分析和上傳所選文件，所以不需要它。

可以選擇在支持文件拖放時隱藏文件輸入元素。就我個人而言，我更喜歡同時提供這兩種選項，因為拖放會帶來一些可用性問題。 XMLHttpRequest.upload方法檢查可以防止Opera中的問題。瀏覽器支持File、FileList和FileReader，但不支持拖放事件或XMLHttpRequest2。因此，它可以顯示文件信息，但我們不想顯示#filedrag元素或移除提交按鈕。

文件拖放樣式更改

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

<code class="language-javascript">// 文件拖放悬停
function FileDragHover(e) {
    e.stopPropagation();
    e.preventDefault();
    e.target.className = (e.type == "dragover" ? "hover" : "");
}</code>

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

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

<code class="language-javascript">// 文件选择
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);
    }

}</code>

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

<code class="language-html"><fieldset>
<legend>HTML文件上传</legend>
<div>
  <input type="file" id="fileselect" name="fileselect[]" multiple>
  <label for="fileselect">选择要上传的文件：</label>
  <div id="filedrag">或将文件拖放到此处</div>
</div>
<input type="submit" value="上传文件" id="submitbutton">
</fieldset>
<div id="messages">状态信息</div></code>

該函數使用File對象提供的三個主要只讀屬性輸出信息：-.name：文件名（不包含路徑信息）-.type：MIME類型，例如image/jpeg、text/plain等-.size ：文件大小（以字節為單位）。

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

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

以上是如何使用HTML5文件拖放的詳細內容。更多資訊請關注PHP中文網其他相關文章！