把文件從桌面拖拽到瀏覽器是Web應(yīng)用程序集成的最終目標(biāo)之一。本教程共四篇文章(本文是第一篇)，主要介紹了：
創(chuàng)新互聯(lián)公司主營(yíng)都昌網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā)公司,都昌h5微信小程序定制開(kāi)發(fā)搭建,都昌網(wǎng)站營(yíng)銷(xiāo)推廣歡迎都昌等地區(qū)企業(yè)咨詢(xún)
1.實(shí)現(xiàn)將文件拖放到頁(yè)面元素上
2.在JavaScript中分析被拖放的文件
3.在客戶(hù)端上加載和解析文件
4.使用XMLHttpRequest2將文件異步上傳到服務(wù)器
5.上傳時(shí)，顯示圖形進(jìn)度條
6.使用進(jìn)程增強(qiáng)( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作
7.純JavaScript代碼，不使用其它庫(kù)。
咻，開(kāi)始吧！
糟糕的瀏覽器支持
在開(kāi)始之前說(shuō)明一下，這個(gè)教程使用了一些HTML5的最新技術(shù)，可能以后會(huì)被修正。目前代碼可以正常工作，但是很可能隨著API的變化或者瀏覽器升級(jí)而受到影響。
§Firefox和Chrome的最新版本支持所有的功能并且可以完美運(yùn)行。
§Opera可以用JavaScript解析文件，但未實(shí)現(xiàn)拖放文件和XMLHttpRequest2上傳。
§IE瀏覽器和桌面版本的Safari不支持所有的API。
§蘋(píng)果已禁用Safari瀏覽器的iPhone和iPad版本的HTML文件上傳表單。有誰(shuí)知道為什么嗎？
最后，請(qǐng)注意我的代碼只是演示了基本概念，幾乎沒(méi)有錯(cuò)誤檢查，因此需要進(jìn)行修改以適應(yīng)你的工作需要。
HTML和CSS
這是我們的帶有文件輸入類(lèi)型的標(biāo)準(zhǔn)表單。唯一的HTML5特性是“multiple”屬性，它允許用戶(hù)選擇任意數(shù)量的文件。
我們將上傳文件到運(yùn)行PHP的服務(wù)器上，但是無(wú)論你在服務(wù)器端使用什么技術(shù)，代碼是大致相同的。隱藏的MAX_FILE_SIZE值指定為300,000個(gè)字節(jié)，這是PHP使用的，但我們還會(huì)在瀏覽器端用它進(jìn)行檢查，以防止大文件上傳。
#filedrag元素將被用作接收拖放文件的位置。元素是通過(guò)CSS隱藏的，但如果瀏覽器支持拖拽的話，它會(huì)在JavaScript中被顯示：
我們還定義了一個(gè).hover類(lèi)，當(dāng)用戶(hù)拖動(dòng)文件到相應(yīng)區(qū)域元素時(shí)，改變?cè)氐娘@示風(fēng)格。瀏覽器不支持在那種情況下的:hover風(fēng)格，但當(dāng)事件觸發(fā)時(shí)，我們可以用JavaScript添加類(lèi)。
文件操作API
W3C 文件操作API
提供了一些對(duì)象，我們使用了：
§FileList：代表選定的文件數(shù)組。
§File：代表一個(gè)單獨(dú)的文件。
§FileReader：支持JavaScript的客戶(hù)端讀取文件數(shù)據(jù)的接口。
Javascript事件
是時(shí)候處理JavaScript代碼了。我們不使用任何JavaScript庫(kù)，為了節(jié)省時(shí)間，我們將創(chuàng)建一個(gè)輔助函數(shù)返回元素的ID和輸出狀態(tài)消息：
我們將在Init()函數(shù)里檢查文件操作API是否有效:
Init()函數(shù)說(shuō)明:
1.給文件輸入元素設(shè)置一個(gè)“change”事件監(jiān)聽(tīng)器。
2.顯示#filedrag元素。
3.設(shè)置“dragover”和“dragleave”事件監(jiān)聽(tīng)器，以改變的＃filedrag元素的風(fēng)格。
4.給#filedrag元素設(shè)置一個(gè)“drop”的事件監(jiān)聽(tīng)器。
5.隱藏表單的提交按鈕 - 它不是必需的，因?yàn)楫?dāng)文件被選中時(shí)我們將進(jìn)行分析和上傳，而不是提交表單。
或者，當(dāng)瀏覽器支持文件拖動(dòng)時(shí)，你可以隱藏文件輸入元素。就個(gè)人而言，我更愿意同時(shí)提供兩種選擇，因?yàn)橥戏艑?shí)際上會(huì)帶來(lái)實(shí)用性的問(wèn)題。
XMLHttpRequest.upload方法檢查防止在Opera中的問(wèn)題。瀏覽器支持File，F(xiàn)ileList和FileReader，但不支持拖放事件或XMLHttpRequest2。因此，它可以顯示文件信息，但我們不希望顯示#filedrag的元素或刪除submit按鈕。
改變文件拖放風(fēng)格
很少人在瀏覽器中進(jìn)行過(guò)文件拖放。事實(shí)上，經(jīng)驗(yàn)豐富的網(wǎng)絡(luò)用戶(hù)也不太考慮是否可行。因此，我們使用了標(biāo)有“drop files here”的元素。當(dāng)文件拖到#filedrag上時(shí)，我們還通過(guò)改變?cè)氐娘L(fēng)格來(lái)進(jìn)行顯示。
分析放下或被選中的文件
無(wú)論是使用“Browse”按鈕來(lái)選中一個(gè)或多個(gè)文件，或者將文件拖放到拖#filedrag的位置上，我們使用的的相同F(xiàn)ileSelectHandler()函數(shù)來(lái)進(jìn)行處理：
函數(shù)說(shuō)明：
1.調(diào)用FileDragHover()刪除hover風(fēng)格和取消瀏覽器的事件。這是必不可少的，否則瀏覽器可能會(huì)嘗試顯示該文件。
2.獲取一個(gè)FileList對(duì)象，無(wú)論是從文件輸入框（e.target.files）或#filedrag元素（例如dataTransfer.files）。
3.最后，函數(shù)遍歷FileList的所有File對(duì)象，并把它作為一個(gè)參數(shù)傳遞給ParseFile()函數(shù)...
該函數(shù)輸出的信息是File對(duì)象提供的三個(gè)主要的只讀屬性：
§.name: 文件名 (不包含文件路徑)。
§.type: MIME類(lèi)型, 例如 image/jpeg，text/plain等等。
§.size: 文件大?。ㄗ止?jié)）.
如何使用HTML5進(jìn)行文件拖放
1.實(shí)現(xiàn)將文件拖放到頁(yè)面元素上
2.在JavaScript中分析被拖放的文件
3.在客戶(hù)端上加載和解析文件
4.使用XMLHttpRequest2將文件異步上傳到服務(wù)器
5.上傳時(shí)，顯示圖形進(jìn)度條
6.使用進(jìn)程增強(qiáng)( progressive enhancement)以確保文件上傳表單在所有瀏覽器正常工作
7.純JavaScript代碼，不使用其它庫(kù)。
，首先要判斷拖入的文件是否符合要求，包括圖片類(lèi)型、大小等，然后獲取本地圖片信息，實(shí)現(xiàn)預(yù)覽，最后上傳。
$(function(){
...接上部分
var box = document.getElementById('drop_area'); //拖拽區(qū)域
box.addEventListener("drop",function(e){
e.preventDefault(); //取消默認(rèn)瀏覽器拖拽效果
var fileList = e.dataTransfer.files; //獲取文件對(duì)象
//檢測(cè)是否是拖拽文件到頁(yè)面的操作
if(fileList.length == 0){
return false;
}
//檢測(cè)文件是不是圖片
if(fileList[0].type.indexOf('image') === -1){
alert("您拖的不是圖片！");
return false;
}
//拖拉圖片到瀏覽器，可以實(shí)現(xiàn)預(yù)覽功能
var img = window.webkitURL.createObjectURL(fileList[0]);
var filename = fileList[0].name; //圖片名稱(chēng)
var filesize = Math.floor((fileList[0].size)/1024);
if(filesize500){
alert("上傳大小不能超過(guò)500K.");
return false;
}
var str = "img src='"+img+"'p圖片名稱(chēng)："+filename+"/pp大?。?+filesize+"KB/p";
$("#preview").html(str);
//上傳
xhr = new XMLHttpRequest();
xhr.open("post", "upload.php", true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
var fd = new FormData();
fd.append('mypic', fileList[0]);
xhr.send(fd);
},false);
});
可以參考chrome小樂(lè)圖客擴(kuò)展的截圖功能，支持粘貼剪貼板圖片、拖拽圖片、或者粘貼圖片網(wǎng)址上傳，是通過(guò)html5 file reader實(shí)現(xiàn)的。
重慶分公司
重慶分公司
