如何使用HTML5打開刪除文件

態在我的上一篇文章中，如何使用HTML5文件拖動和刪除 ，我們發現瞭如何使用HTML5文件API，實現拖放事件並檢索文件信息。今天，我們將嘗試使用JavaScript在客戶端上加載文件。

為什麼在JavaScript中打開本地文件？ 從HTML表單上傳文件很笨拙。人們經常在將多毛線照片從相機轉移到網絡服務器時使用它。假設他們找到了文件，上傳可能需要幾分鐘才能發現它是錯誤的照片，不支持的格式或比允許的更大的文件大小。到目前為止，開發人員必須依靠Flash或其他插件來提供更好的用戶體驗。 JavaScript中的預處理提供了許多好處：

本地文件處理很快。
• 可以分析文件以確保它們是正確的格式並且低於特定尺寸的文件。 >
>圖像等文件可以在上傳之前進行預覽。
• >
>可以在畫布元素上裁剪或調整圖像，然後上傳結果文件。
• fileReader對象
fileReader構成了W3C文件API的一部分，並提供了四種方法，以異步從文件對像中引用的文件加載數據：

> .readastext（文件f，[編碼]）：將文件f讀取到字符串中。假定UTF-8編碼，但是可選的編碼參數可以指定不同的格式。

>

.readasdataurl（文件f）：將文件f讀取到編碼的數據url
.readasbinarystring（文件f）：讀取文件f作為二進製字符串
• >
.readAsarrayBuffer（文件f）：將文件f讀為arraybuffer對象。

在以下代碼中，我們將使用前兩種方法來加載和顯示文本和圖像文件。

>在JavaScript

中不同步打開文件 這是我們的原始parsefile（）函數，當將文件對象選擇或掉入#filedrag元素時，它傳遞給文件對象：

// output file information
function ParseFile(file) {

	Output(
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	);
	
}

遵循狀態更新後，我們將檢查是否有文本文件（文本/純文本/html，text/css等），使用filereader.readastext（）方法加載它並顯示結果（逃脫 targue）：

	// display text
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong></p><pre class="brush:php;toolbar:false">" + 
				e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
				"

" ); } reader.readAsText(file); }

同樣，我們可以檢查是否具有圖像文件（Image/jpeg，image/gif，image/png等），使用filereader.readasdataurl（）方法將其加載到數據URL中，然後將結果傳遞給IMG標籤的SRC屬性：

	// display an image
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
			Output(
				"<p><strong>" + file.name + ":</strong><br />" +
				'<img src="' + e.target.result + '" /></p>'
			);
		}
		reader.readAsDataURL(file);
	}

請在Firefox，Chrome或Opera中查看演示頁面（無拖放支持）。您也可以下載文件 檢查代碼。 儘管這很有用，但最終，我們需要將文件上傳到Web服務器。請繼續關注如何使用HTML5和AJAX…異步上傳文件… 經常詢問有關HTML5和JavaScript打開的問題（常見問題解答）

使用HTML5和JavaScript打開刪除文件的目的是什麼？此功能使用戶可以將文件從其本地系統拖放到網頁上。掉落後，可以使用JavaScript讀取和處理這些文件。這對於諸如上傳文件，讀取文件內容或在Web應用程序中的處理圖像或文檔之類的任務特別有用。

>

如何通過一組事件和屬性來促進html5？

中的拖放功能在html5？當用戶在系統上選擇文件並將其拖到網頁上時，觸發了“ Dragover”事件。如果文件刪除，則觸發“刪除”事件。這些事件的一部分的DataTransfer屬性保存文件數據，可用於訪問和處理文件。

>

>如何使用JavaScript？

javascript讀取刪除文件的內容？將文件刪除到網頁上後，可以通過DataTransfer屬性訪問它。可以創建一個新的FileReader對象，並且可以使用RealStext或ReadAsdataurl方法來讀取文件內容。可以在FileReader對象的“加載”事件中訪問結果。

我可以一次打開多個刪除文件嗎？ DataTransfer屬性提供了“文件”屬性，該屬性是filelist對象。此對象表示所有刪除的文件的列表。您可以循環瀏覽此列表以分別訪問和處理每個文件。

我可以使用HTML5和JavaScript？

>您可以使用HTML5和JavaScript打開任何類型的文件。但是，如何處理該文件取決於其類型。例如，可以將文本文件讀取為文本，而圖像文件可以讀取為數據URL並使用IMG元素顯示。

>

使用html5和javaScript打開掉落的文件是安全的嗎？

>使用HTML5和JavaScript打開丟棄的文件，並且JavaScript通常是安全的，因為該文件通常是安全的，因為文件僅讀取和處理客戶sept client seled seplect sarecles seled select select seplect。但是，如果將文件數據發送到服務器，則應對其進行正確驗證和消毒以防止安全問題。

我可以使用HTML5和JavaScript在所有瀏覽器上打開所有瀏覽器上的刪除文件嗎？

最現代的瀏覽器支持HTML5 Drag and Drog drog drag and drog drog drog drog drog drog and drog drog drog drog and javaScript fileeleeadereadereadereadereaderapi。但是，這些功能的實現方式可能存在差異。因此，重要的是要在不同的瀏覽器上測試您的代碼以確保兼容性。

>

>如何在網頁上顯示掉落文件的內容？

>可以使用JavaScript在網頁上顯示刪除文件的內容。例如，如果文件是圖像，則可以將其讀取為數據URL並將其設置為IMG元素的SRC屬性。如果文件是文本文件，則可以將其內容插入文本元素中。

我可以限制可以刪除的文件類型嗎？

> ，而您無法直接限制可以刪除的文件類型，您可以使用文件對象的“類型”屬性檢查掉落的文件類型。如果文件類型與允許的類型不匹配，則可以顯示錯誤消息並忽略文件。 我可以從不同文件夾中拖放文件嗎？ 是的，您可以從不同文件夾中拖放文件。拖放功能不取決於文件的位置。只要用戶可以訪問這些文件，就可以將它們拖放到網頁上。 >

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