1、本文主要實(shí)現(xiàn)的功能是文件拖拽到指定標(biāo)簽區(qū)域能后獲取到相關(guān)事件和文件
2、從粘貼板獲取到圖片信息（主要目的就是實(shí)現(xiàn)網(wǎng)頁聊天功能能夠拖拽發(fā)送文件，粘貼發(fā)送圖片功能）
拖拽事件
js能夠監(jiān)聽到拖拽的事件有drag、dragend、dragenter、dragexit(沒有瀏覽器實(shí)現(xiàn))、dragleave、dragover、dragstart、drop，詳細(xì)的內(nèi)容可以看MDN。
其中，與拖拽文件相關(guān)的事件有dragenter(文件拖拽進(jìn))、dragover(文件拖拽在懸浮)、dragleave(文件拖拽離開)、drop(文件拖拽放下)。
拖拽事件可以綁定到指定的DOM元素上，可以綁定到整個(gè)頁面中。
var dropEle = document.querySelector('#dropZone');
dropEle.addEventListener('drop', function (e) {
//
}, false);
阻止默認(rèn)行為
一般來說，我們只需要把處理拖拽文件的業(yè)務(wù)邏輯寫到drop事件中就可以了，為什么還要綁定dragenter、dragover、dragleave這三個(gè)事件呢？
因?yàn)楫?dāng)你拖拽一個(gè)文件到?jīng)]有對拖拽事件進(jìn)行處理的瀏覽器中的時(shí)候，瀏覽器會打開這個(gè)文件，比如拖拽一張圖片瀏覽器會打開這個(gè)圖片，在沒有PDF閱讀器的時(shí)候也可以拖拽一個(gè)PDF到瀏覽器中，瀏覽器就會打開這個(gè)PDF文件。
如果瀏覽器打開了拖拽的文件，頁面就跳走了，我們希望得到拖拽的文件，而不是讓頁面跳走。上面說到瀏覽器會打開拖拽的文件是瀏覽器的默認(rèn)行為，我們需要阻止這個(gè)默認(rèn)行為，就需要再上述的事件中進(jìn)行阻止。
如果你只使用了drop事件，需要再加入以下一個(gè)或者多個(gè)事件，防止瀏覽器默認(rèn)打開
dropZone.addEventListener("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropZone.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
// 處理拖拽文件的邏輯
}
實(shí)際上dragenter不阻止默認(rèn)行為也不會觸發(fā)瀏覽器打開文件，為了防止某些瀏覽器可能有的兼容性問題，把拖拽周期中的所有的事件都阻止默認(rèn)行為并且阻止了事件冒泡。
在我實(shí)際測試的時(shí)候 將文件拖入到可編輯區(qū)域的時(shí)候 drop是沒問題，瀏覽器不會執(zhí)行瀏覽器的默認(rèn)程序，非編輯狀態(tài)的標(biāo)簽是會打開的。
獲得拖拽的文件
我們會在drop這個(gè)事件的回調(diào)中的事件對象能夠得到文件對象。
在事件對象中，一個(gè)e.dataTransfer這樣的屬性，它是一個(gè)DataTransfer類型的數(shù)據(jù)，有如下的屬性
| 屬性 | 類型 | 說明 |
|---|---|---|
| dropEffect | String | 用來hack某些兼容性問題 |
| effectAllowed | String | 暫時(shí)不用 |
| files | FileList | 拖拽的文件列表 |
| items | DataTransferItemList | 拖拽的數(shù)據(jù)(有可能是字符串) |
| types | Array | 拖拽的數(shù)據(jù)類型 該屬性在Safari下比較混亂 |
在Chrome中我們用items對象獲得文件，其他瀏覽器用files獲得文件，主要是為了處理拖拽文件夾的問題，最好不允許用戶拖拽文件夾，因?yàn)槲募A內(nèi)可能還有文件夾，遞歸上傳文件會很久，如果不遞歸查找，只上傳目錄第一層級的文件，用戶可能以為上傳功能了，但是沒有上傳子目錄文件，所以還是禁止上傳文件夾比較好，后面我會說要怎么處理。
測試代碼
<!DOCTYPE html>
<html>
<head>
<title>drap</title>
</head>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<body>
<div id="dropZone" style="width: 500px;height: 500px;background-color: red">
</div>
</body>
<script type="text/javascript">
var dropEle = document.querySelector("#dropZone");
dropEle.addEventListener("dragenter", function (e) {
e.preventDefault();
e.stopPropagation();
console.log('dragenter')
}, false);
dropEle.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
console.log('dragover')
}, false);
dropEle.addEventListener("dragleave", function (e) {
e.preventDefault();
e.stopPropagation();
console.log('dragleave')
}, false);
dropEle.addEventListener("drop", function (e) {
e.preventDefault();
e.stopPropagation();
var df = e.dataTransfer;
var dropFiles = []; // 存放拖拽的文件對象
if(df.items !== undefined) {
// Chrome有items屬性，對Chrome的單獨(dú)處理
for(var i = 0; i < df.items.length; i++) {
var item = df.items[i];
// 用webkitGetAsEntry禁止上傳目錄
if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
var file = item.getAsFile();
dropFiles.push(file);
console.log("------")
console.log(file);
console.log(df.files[0]);
}
}
}else{
for(var i = 0; i < df.files.length; i++) {
if ( dropFile.type ) {
// 如果type不是空串，一定是文件
dropFiles.push(dropFile);
console.log(dropFile)
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener('load', function (e) {
console.log(e, 'load');
dropFiles.push(dropFile);
}, false);
fileReader.addEventListener('error', function (e) {
console.log(e, 'error，不可以上傳文件夾');
}, false);
} catch (e) {
console.log(e, 'catch error，不可以上傳文件夾');
}
}
}
}
}, false);
</script>
</html>
接入到angularjs 中， 功能比較獨(dú)立所以就把他寫成指令
.directive('dropFile',['$log','Tools',function($log,Tools){
return{
restrict:'A',
link:function (scope,element,attrs) {
//為了防止瀏覽器默認(rèn)打開文件
angular.element(element).on("dragover",function (e) {
e.preventDefault();
});
angular.element(element).on("drop", function (e) {
scope.imgs=[];
scope.files=[];
e.preventDefault();
e.stopPropagation();
var df = e.originalEvent.dataTransfer;//這個(gè)地方和javascript 有些不一樣需要注意否則取不到值
var dropFiles = []; // 存放拖拽的文件對象
if (df.items !== undefined) {
// Chrome有items屬性，對Chrome的單獨(dú)處理
for (var i = 0; i < df.items.length; i++) {
var item = df.items[i];
// 用webkitGetAsEntry禁止上傳目錄
if (item.kind === "file" && item.webkitGetAsEntry().isFile) {
var file = item.getAsFile();
dropFiles.push(file);
}
}
} else {
for (var i = 0; i < df.files.length; i++) {
if (dropFile.type) {
// 如果type不是空串，一定是文件
dropFiles.push(dropFile);
} else {
try {
var fileReader = new FileReader();
fileReader.readAsDataURL(dropFile.slice(0, 3));
fileReader.addEventListener('load', function (e) {
console.log(e, 'load');
dropFiles.push(dropFile);
}, false);
fileReader.addEventListener('error', function (e) {
console.log(e, 'error，不可以上傳文件夾');
}, false);
} catch (e) {
console.log(e, 'catch error，不可以上傳文件夾');
}
}
}
}
//拿到文件去做相關(guān)業(yè)務(wù)操做
if(dropFiles.length>0){
var data = {};
data["files"] = dropFiles;
scope.$broadcast("$$dropFile",data);
}
});
}
}
}]);
從粘貼板獲取圖片
需要標(biāo)簽監(jiān)聽paste事件、angularjs 中有ng-paste事件監(jiān)聽,我們直接使用即可
$scope.copyFile=function (event) {
if ( event.clipboardData || event.originalEvent ) {
//not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if ( clipboardData.items ) {
// for chrome
var items = clipboardData.items, len = items.length, blob = null;
//在items里找粘貼的image,據(jù)上面分析,需要循環(huán)
for (var i = 0; i < len; i++) {
if (items[i].type.indexOf("image") !== -1) {
//getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
var data = {};
var files = [];
files.push(blob);
//業(yè)務(wù)邏輯
data["files"] = files;
$scope.$broadcast("$$dropFile",data);
event.stopPropagation();
event.preventDefault();
}
}
} else {
//for firefox
$log.log("您的瀏覽器不支持功能");
}
}
}
參考博客
