在HTML5中，出現了眾多的新的技術和特性，而本文將介紹的是目前HTML5標準中，對如何將用戶客戶端的文件拖拉到瀏覽器這一特性進行初步的講解。在HTML5中的標準中，提到了希望能在新一代瀏覽器中，支持用戶直接將客戶端桌面的文件拖放到瀏覽器中，甚至鼓勵做更多的工作(比如上傳文件)。這篇文章將分如下幾個方面進行初步的分析和探討：

　　如何將文件拖放到web頁面中
　　在Javascript中分析拖拽文件
　　在客戶端裝載和解析文件
　　使用 XMLHttpRequest2異步上傳文件到服務端
　　上傳時顯示一個進度條
　　改進上傳文件的表單，甚至支持IE 6，以讓在各瀏覽器中可以兼容運行。
　　并介紹如何單單只用Javascript實現，不用任何框架。
　　目前瀏覽器對文件拖拉的支持

　　在我們開始講解前，我們先要說明下，由于HTML5的標準最終版本還沒完全發布，各瀏覽器也不是完全都對所有功能進行支持，所以本文的程序有可能在今后的各瀏覽器中不能完全運行成功，但至少在本文發表時，會對以下瀏覽器在如下各方面進行支持。

　　1) 目前程序能在所有的Firefox和Chrome的瀏覽器中很好的運行。

　　2) Opera瀏覽器能解通過Javascript去解析文件，但不支持文件的拖拉到瀏覽器中及使用XMLHttpRequest2去上傳文件。

　　3) IE和Safari不支持任何本文提到的API和新特性。

　　4) Apple不允許在iOS系統中使用HTML表單上傳文件。

　　下面，就讓我們開始學習之旅吧。

　　HTML和CSS

　　我們先來看下上傳文件的表單，代碼如下：

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data">
<fieldset>
<legend>HTML File Upload</legend>
<input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" />
<div>
??? <label for="fileselect">Files to upload:</label>
??? <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />
??? <div id="filedrag">or drop files here</div>
</div>
<div id="submitbutton">
??? <button type="submit">Upload Files</button>
</div>
</fieldset>
</form>
<div id="messages">
<p>Status Messages</p>
</div>

　　可以看到，在這個表單中，放置了一個文件選擇框，唯一跟HTML4不同的時，這個框采

　　用的是HTML5中的一個新增的文件上傳框屬性multiple，允許選擇多個不同的文件。此外，

　　在id為 filedrag的div中，這個區域是用來將文件拖拉放置的區域，下文中會用到。

　　接下來會看下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;

　　}

?

　　在這段CSS中，設置了當文件拖放到頁面的指定區域時的樣式，這個樣式是當文件被拖動

　　到指定區域時，才起到作用的，是通過Javascript擊發其起作用的，下文會提到。

　　HTML5中的文件API

　　在HTML5中，對文件的API有如下幾點的新的改進，其標準可以參考

　　(http://www.w3.org/TR/file-upload/)。

　　FileList: 表示已選擇的文件，以數組的形式表示。
　　File: 代表一個單獨的文件
　　FileReader: FileReader是一個接口，它允許我們在客戶端讀取文件的數據，并且可以在Javascript中去使用。
　　開始動手寫Javascript

　　下面，我們開始動手編寫Javascript，首先我們編寫一些工具javascript，比如：

// getElementById

　　function $id(id) {

　　return document.getElementById(id);

　　}

　　//

　　// 輸出信息

　　function Output(msg) {

　　var m = $id("messages");

　　m.innerHTML = msg + m.innerHTML;

　　}

　　接者，我們編寫init方法，去判斷文件API的可用性，代碼如下：

　// 判斷當前瀏覽器中文件API是否可用

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

　　// 判斷xmlhttprequest 2是否可用

　　var xhr = new XMLHttpRequest();

　　if (xhr.upload) {

　　// file drop

　　filedrag.addEventListener("dragover", FileDragHover, false);

　　filedrag.addEventListener("dragleave", FileDragHover, false);

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

　　filedrag.style.display = "block";

　　// remove submit button

　　submitbutton.style.display = "none";

　　}

　　}

　
?

轉載于:https://blog.51cto.com/wws5201985/736992

總結

以上是生活随笔為你收集整理的玩转HTML5应用实战：灵活拖拉文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。