HTML5文件拖動，刪除，分析，讀取和上傳

態這是一個忙碌的一周。我們已經發現了新的HTML5 API如何幫助我們打開，閱讀和上傳用戶將這些文件拖動並掉入瀏覽器窗口中。本文總結了瀏覽器支持的技術和當前水平。

鑰匙要點

• > HTML5 API可以幫助打開，讀取和上傳用戶已將其拖動到瀏覽器窗口中的文件。此功能由Chrome，Firefox和Opera的最新版本支持，但Opera只能通過標准文件輸入來使用它。
> HTML5 FILELIST對像是類似數組的文件對象集合，FileReader對象允許您在JavaScript中打開文本或二進製文件。這使得在進行進一步處理或上傳之前，可以檢查文件類型和大小。
• >
> HTML5允許通過將“進度”事件連接到XMLHTTPREQUEST2對象來創建上傳進度條。此功能加上拖放文件的能力，可以顯著增強Web應用程序的可用性。
HTML5 API支持

您的JavaScript代碼應在附加事件處理程序之前檢查文件，filelist和fileReader對象的存在。在撰寫本文時，這些由Chrome，Firefox和Opera的最新版本支持：

儘管Opera支持這些對象，但它們只能通過標准文件輸入來使用 - 而不是拖放。因此，需要進一步檢查；我建議使用xmlhttprequest2上傳方法，例如

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

>文件拖動

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

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

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

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

檢索filelist對象

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

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

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

>分析文件對象

// 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集合包含許多文件對象。提供了三個有用的文件屬性：

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

>
1. .. type：啞劇類型，例如圖像/jpeg，文本/普通等。
2. .size：字節中的文件大小。

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

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

有關更多信息，請參閱如何使用HTML5和JavaScript打開刪除文件。

>使用fileReader

打開文件 HTML5 FileReader對象允許您在JavaScript中打開文本或二進製文件。正如您所期望的那樣，readastext（）方法用於檢索文本內容，例如

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

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

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

有關更多信息，請參閱如何使用HTML5和JavaScript打開刪除文件。

>使用ajax

上傳文件 當用戶保留在頁面上時，可以將適當的文件上傳到您的服務器。這只是將文件對像傳遞到xmlhttprequest2的send（）方法的問題：

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

注意，我們還將文件名發送為HTTP標頭。這是可選的，但是它允許我們使用諸如PHP之類的語言在服務器上使用其原始名稱重新創建文件：

// 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++) {
	...
}

有關更多信息，請參閱如何使用HTML5和AJAX異步上傳文件。

創建上傳進度欄

我們還可以將“進度”事件附加到xmlhttprequest2對象：

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

該處理程序接收一個帶有.LOAD（傳輸的字節的數量）和.Total（文件大小）屬性的事件對象。因此，可以計算進度並將其傳遞給HTML5進度標籤或任何其他元素，例如

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);
}

有關更多信息，請參閱如何在HTML5和JavaScript中創建圖形文件上傳進度條。 希望您喜歡這個系列。文件拖放是一個重要的功能，可以轉換Web應用程序的可用性。 HTML5終於變得容易了。

>關於HTML5文件拖動，刪除，讀取，分析和上傳進度條

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

>如何在我的Web應用程序中實現HTML5拖放功能？

>實現HTML5拖放功能涉及幾個步驟。首先，您需要創建一個Drop區域，該區域是用戶可以刪除文件的區域。這可以是任何HTML元素，但必須將“可拖動”屬性設置為true。接下來，您需要為“拖動”和“丟棄”事件添加事件聽眾。當拖動物品在下降區域上方時，“拖曳”事件將發射，並且在刪除該項目時發射“下降”事件。如果“ drop”事件的處理程序，您可以通過事件對象的“ datatrans.files”屬性訪問刪除的文件。

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

>“ dataTransfer.files”和“ datatRansfer.items”之間有什麼區別。 “ dataTransfer.files”屬性是代表要拖動的文件的filelist對象。當您要處理服務器端上的文件時，這很有用。另一方面，“ dataTransfer.items”是代表所有阻力數據的DatatRansferitemlist對象。當您要處理不同類型的拖放數據時，這很有用，而不僅僅是文件。

為什麼我的“ dataTransfer.files”在射擊“ drop”事件時空為空？

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

>如何讀取已刪除文件的內容？

您可以使用FileReader API讀取丟棄文件的內容。首先，您需要創建一個新的FileReader對象。然後，您可以使用“ readastext”或“ readasdataurl”方法讀取文件內容。 “ readastext”方法將文件讀取為文本字符串，而“ readasdataurl”方法將文件讀取為數據URL。

在上傳文件時如何顯示進度欄？

>

您可以通過聆聽XMLHTTPEREQUEST PEREQUEST PREQUEST PREQUEST的“進度”事件來顯示進度欄。隨著上載的進行，“進度”事件會定期發射。如果情況處理程序，您可以計算進度百分比並相應地更新進度欄。確保將XMLHTTPREQUEST對象的“上載”屬性設置為真實，以啟用“進度”事件。

>

>我如何處理多個文件上傳？

>您可以通過在“ dataTransfer.files.files”屬性上迭代來處理多個文件上傳，哪些是文件。 filelist對像中的每個項目都是代表掉落文件的文件對象。您可以單獨處理每個文件，例如，通過讀取其內容或將其上傳到服務器。

>

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

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

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

>處理嵌套元素的拖放事件可能很棘手，因為事件在DOM樹上冒泡。為了防止父母元素收到針對子元素的拖放事件，您可以在子元素的事件處理程序中調用事件對象的“停止propagation”方法。

>

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

>如何測試自動化測試中的拖放功能？

測試拖放功能可能具有挑戰性，因為它涉及復雜的用戶交互。但是，某些測試庫（例如硒）提供了模擬阻力動作的方法。您還可以創建一個模擬的“ Drop”事件並將其派遣到Drop Zone Element。

以上是HTML5文件拖動，刪除，分析，讀取和上傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！