這是一個(gè)忙碌的一周。我們已經(jīng)發(fā)現(xiàn)了新的HTML5 API如何幫助我們打開，閱讀和上傳用戶將這些文件拖動(dòng)并掉入瀏覽器窗口中。本文總結(jié)了瀏覽器支持的技術(shù)和當(dāng)前水平。

鑰匙要點(diǎn)

• > HTML5 API可以幫助打開，讀取和上傳用戶已將其拖動(dòng)到瀏覽器窗口中的文件。此功能由Chrome，F(xiàn)irefox和Opera的最新版本支持，但Opera只能通過標(biāo)準(zhǔn)文件輸入來(lái)使用它。
> HTML5 FILELIST對(duì)象是類似數(shù)組的文件對(duì)象集合，F(xiàn)ileReader對(duì)象允許您在JavaScript中打開文本或二進(jìn)制文件。這使得在進(jìn)行進(jìn)一步處理或上傳之前，可以檢查文件類型和大小。
• >
> HTML5允許通過將“進(jìn)度”事件連接到XMLHTTPREQUEST2對(duì)象來(lái)創(chuàng)建上傳進(jìn)度條。此功能加上拖放文件的能力，可以顯著增強(qiáng)Web應(yīng)用程序的可用性。
HTML5 API支持

您的JavaScript代碼應(yīng)在附加事件處理程序之前檢查文件，filelist和fileReader對(duì)象的存在。在撰寫本文時(shí)，這些由Chrome，F(xiàn)irefox和Opera的最新版本支持：

盡管Opera支持這些對(duì)象，但它們只能通過標(biāo)準(zhǔn)文件輸入來(lái)使用 - 而不是拖放。因此，需要進(jìn)一步檢查；我建議使用xmlhttprequest2上傳方法，例如

if (window.File && window.FileList && window.FileReader) { ... }

>文件拖動(dòng)

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

所有瀏覽器（iPhone和iPad上的瀏覽器除外）支持顯示熟悉的“瀏覽”按鈕的文件輸入類型。 HTML5中引入了“多個(gè)”屬性，我們可以將更改事件處理程序附加到該字段：

Chrome和Firefox還允許用戶將一個(gè)或多個(gè)文件拖動(dòng)到所選元素上。您可以將事件處理程序連接在內(nèi)，包括“ Dragover”和“ DragLeave”（用于更改樣式）和“ Drop”，以檢測(cè)掉落的文件，例如

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

檢索filelist對(duì)象

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

HTML5 Filelist對(duì)象是類似數(shù)組的文件對(duì)象集合。文件輸入字段通過文件屬性（event.target.files）返回filelist。丟棄的文件通過事件的dataTransfer.files屬性（event.datatransfer.files）返回filelist對(duì)象。 因此，我們可以使用單個(gè)事件處理程序檢索filelist對(duì)象：

取消默認(rèn)事件很重要。這樣可以防止瀏覽器掉入窗口時(shí)試圖顯示或處理文件的嘗試。

>分析文件對(duì)象

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

filelist集合包含許多文件對(duì)象。提供了三個(gè)有用的文件屬性：

.name：文件名（不包括路徑信息）

>
1. .. type：?jiǎn)☆愋停鐖D像/jpeg，文本/普通等。
2. .size：字節(jié)中的文件大小。

在進(jìn)行進(jìn)一步處理或上傳之前，可以檢查文件類型和大小，例如

if (window.File && window.FileList && window.FileReader) { ... }

有關(guān)更多信息，請(qǐng)參閱如何使用HTML5和JavaScript打開刪除文件。

>使用fileReader

打開文件 HTML5 FileReader對(duì)象允許您在JavaScript中打開文本或二進(jìn)制文件。正如您所期望的那樣，readastext（）方法用于檢索文本內(nèi)容，例如

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

同樣，ReadAsdataurl（）方法將二進(jìn)制圖像數(shù)據(jù)作為編碼數(shù)據(jù)URL檢索，可以將其傳遞到Image SRC屬性或畫布元素：

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

有關(guān)更多信息，請(qǐng)參閱如何使用HTML5和JavaScript打開刪除文件。

>使用ajax

上傳文件 當(dāng)用戶保留在頁(yè)面上時(shí)，可以將適當(dāng)?shù)奈募蟼鞯侥姆?wù)器。這只是將文件對(duì)象傳遞到xmlhttprequest2的send（）方法的問題：

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

注意，我們還將文件名發(fā)送為HTTP標(biāo)頭。這是可選的，但是它允許我們使用諸如PHP之類的語(yǔ)言在服務(wù)器上使用其原始名稱重新創(chuàng)建文件：

// cancel event default
e.preventDefault();

// fetch FileList object
var files = e.target.files || e.dataTransfer.files;

// process all File objects
for (var i = 0, file; file = files[i]; i++) {
	...
}

有關(guān)更多信息，請(qǐng)參閱如何使用HTML5和AJAX異步上傳文件。

創(chuàng)建上傳進(jìn)度欄

我們還可以將“進(jìn)度”事件附加到xmlhttprequest2對(duì)象：

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

該處理程序接收一個(gè)帶有.LOAD（傳輸?shù)淖止?jié)的數(shù)量）和.Total（文件大小）屬性的事件對(duì)象。因此，可以計(jì)算進(jìn)度并將其傳遞給HTML5進(jìn)度標(biāo)簽或任何其他元素，例如

if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

有關(guān)更多信息，請(qǐng)參閱如何在HTML5和JavaScript中創(chuàng)建圖形文件上傳進(jìn)度條。 希望您喜歡這個(gè)系列。文件拖放是一個(gè)重要的功能，可以轉(zhuǎn)換Web應(yīng)用程序的可用性。 HTML5終于變得容易了。

>關(guān)于HTML5文件拖動(dòng)，刪除，讀取，分析和上傳進(jìn)度條

的常見問題（常見問題解答）

>如何在我的Web應(yīng)用程序中實(shí)現(xiàn)HTML5拖放功能？

>實(shí)現(xiàn)HTML5拖放功能涉及幾個(gè)步驟。首先，您需要?jiǎng)?chuàng)建一個(gè)Drop區(qū)域，該區(qū)域是用戶可以刪除文件的區(qū)域。這可以是任何HTML元素，但必須將“可拖動(dòng)”屬性設(shè)置為true。接下來(lái)，您需要為“拖動(dòng)”和“丟棄”事件添加事件聽眾。當(dāng)拖動(dòng)物品在下降區(qū)域上方時(shí)，“拖曳”事件將發(fā)射，并且在刪除該項(xiàng)目時(shí)發(fā)射“下降”事件。如果“ drop”事件的處理程序，您可以通過事件對(duì)象的“ datatrans.files”屬性訪問刪除的文件。

>“ dataTransfer.files”和“ dataTranser.Items”？

>“ dataTransfer.files”和“ datatRansfer.items”之間有什么區(qū)別。 “ dataTransfer.files”屬性是代表要拖動(dòng)的文件的filelist對(duì)象。當(dāng)您要處理服務(wù)器端上的文件時(shí)，這很有用。另一方面，“ dataTransfer.items”是代表所有阻力數(shù)據(jù)的DatatRansferitemlist對(duì)象。當(dāng)您要處理不同類型的拖放數(shù)據(jù)時(shí)，這很有用，而不僅僅是文件。

為什么我的“ dataTransfer.files”在射擊“ drop”事件時(shí)空為空？

是空的。 “ DataTransfer.files”屬性僅在“ Drop”事件中填充。確保您是在正確的事件處理程序中訪問它的。

>如何讀取已刪除文件的內(nèi)容？

您可以使用FileReader API讀取丟棄文件的內(nèi)容。首先，您需要?jiǎng)?chuàng)建一個(gè)新的FileReader對(duì)象。然后，您可以使用“ readastext”或“ readasdataurl”方法讀取文件內(nèi)容。 “ readastext”方法將文件讀取為文本字符串，而“ readasdataurl”方法將文件讀取為數(shù)據(jù)URL。

在上傳文件時(shí)如何顯示進(jìn)度欄？

>

您可以通過聆聽XMLHTTPEREQUEST PEREQUEST PREQUEST PREQUEST的“進(jìn)度”事件來(lái)顯示進(jìn)度欄。隨著上載的進(jìn)行，“進(jìn)度”事件會(huì)定期發(fā)射。如果情況處理程序，您可以計(jì)算進(jìn)度百分比并相應(yīng)地更新進(jìn)度欄。確保將XMLHTTPREQUEST對(duì)象的“上載”屬性設(shè)置為真實(shí)，以啟用“進(jìn)度”事件。

>

>我如何處理多個(gè)文件上傳？

>您可以通過在“ dataTransfer.files.files”屬性上迭代來(lái)處理多個(gè)文件上傳，哪些是文件。 filelist對(duì)象中的每個(gè)項(xiàng)目都是代表掉落文件的文件對(duì)象。您可以單獨(dú)處理每個(gè)文件，例如，通過讀取其內(nèi)容或?qū)⑵渖蟼鞯椒?wù)器。

>

>如何限制可以刪除的文件類型？

>您可以限制可以通過檢查“ datatransfer.files.files.files.files.files”屬性的“類型”屬性的文件類型的文件類型。 “類型”屬性是代表文件的MIME類型的字符串。如果不允許使用文件類型，則可以通過調(diào)用“ drop”事件處理程序中事件對(duì)象的“預(yù)防默認(rèn)”方法來(lái)防止刪除操作。

>我如何處理嵌套元素的拖放事件？

>處理嵌套元素的拖放事件可能很棘手，因?yàn)槭录贒OM樹上冒泡。為了防止父母元素收到針對(duì)子元素的拖放事件，您可以在子元素的事件處理程序中調(diào)用事件對(duì)象的“停止propagation”方法。

>

>我如何自定義文件在上面拖動(dòng)文件時(shí)的外觀？ “ Dragleave”和“ Drop”活動(dòng)處理程序。您可以在CSS中定義類的外觀。

>如何測(cè)試自動(dòng)化測(cè)試中的拖放功能？

測(cè)試拖放功能可能具有挑戰(zhàn)性，因?yàn)樗婕皬?fù)雜的用戶交互。但是，某些測(cè)試庫(kù)（例如硒）提供了模擬阻力動(dòng)作的方法。您還可以創(chuàng)建一個(gè)模擬的“ Drop”事件并將其派遣到Drop Zone Element。

以上是HTML5文件拖動(dòng)，刪除，分析，讀取和上傳的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！