首先放一個今天學到的小demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測試</title>
<style>
* {
margin: 0;
padding: 0;
}
.myImg {
width: 200px;
}
#imgs {
width: 500px;
height: 500px;
background-color: cornsilk;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="imgs" ondragover="allowDrop(event)" ondrop="dropImg(event)">
</div>
<script>
//禁用掉瀏覽器掉默認行為
function allowDrop(e) {
e.preventDefault();
}
//當拖放結束時調用：
function dropImg(e) {
//禁用掉瀏覽器掉默認行為
e.preventDefault();
//data為獲取到的文件，只能在ondrop中得到
var data = e.dataTransfer.files;
//獲取多個文件時，遍歷文件，判斷文件是否為我們所要求的類型，並做出處理
for (var i = 0; i < data.length; i++) {
//判斷文件類型,indexOf()的結果假為-1,真為0
var myType = data[i].type;
console.log(myType.indexOf('image'));
if (myType.indexOf('image') === 0) {
//FileReader為html5中封裝的方法，用於將文件讀入內存，並讀取文件中的數據
var reader = new FileReader();
//讀取拖入文件的DataURL,無返回值。
reader.readAsDataURL(data[i]);
//讀取文件成功時觸發
reader.onload = function () {
//this.result為當前文件的base64解碼
//console.log(this.result);
//創建一個img節點並添加到當前框內
var img = document.createElement("img");
img.src = this.result;
img.className = "myImg";
document.getElementById("imgs").appendChild(img);
};
//無論是否成功讀取時都會觸發，用來彈出錯誤或上傳數據
reader.onloadend = function () {
//如果上傳出錯
if (reader.error) {
alert(reader.error);
} else {
//可以進行與服務器的上傳交互
}
}
} else {
//如果傳入的非圖片格式
alert("請上傳圖片！");
}
}
console.log(data);
}
</script>
</body>
</html>
效果大家可以試一下，每一步的注釋也有寫。下面具體說一下：
因為這里的div相當於一個被拖入對象，我們想要實現的效果是圖片拖入時把圖片呈現出來。而瀏覽器在解讀到圖片放入時默認行為是解析圖片並顯示。這顯然不會是我們想要的效果。所以需要禁用掉瀏覽器對當前事件的默認行為也就是：preventDefault();
下面就是編寫當圖片放入時的函數，這里又一個點。是HTML5中的fileAPI，為我們提供了很大的便利。
根據我們打印出來的結果：
我們可以看到，根據dataTransfe.filesr我們可以看到所選的文件列表，有興趣的同學可以具體百度，我這里就不詳細介紹了。
HTML5還提供了FileReader接口：用於將文件讀入內存，並讀取文件中的數據。
var reader = new FileReader();
該接口總共有四個方法和六個事件：
•readAsBinaryString(file):讀取文件為二進制
•readAsDataURL(file):讀取文件DataURL
•readAsText(file,[encoding])：讀取文件為文本
•about(none)：中斷文件讀取
===================================================
•onabort：讀取文件中斷時觸發
•onerror：讀取文件出錯時觸發
•onloadstart：讀取文件開始時觸發
•onprogress：讀取文件中時一直觸發
•onload：讀取文件成功時觸發
•onloadend：讀取文件結束時觸發（成功和失敗都會觸發）
以上事件參數e有e.target.result或this.result指向讀取的結果。
拖放API：
拖放屬性：將需要拖放的元素的dragable屬性設置為true（dragable=”true”）【img元素和a元素默認可以拖放。】
拖放事件：（分為拖放元素事件和目標元素事件）
拖放元素事件：
•dragstart:拖拽前觸發
•drag ,拖拽前、拖拽結束之間，連續觸發
•dragend , 拖拽結束觸發
目標元素事件：
•dragenter , 進入目標元素觸發
•dragover ,進入目標、離開目標之間，連續觸發
•dragleave , 離開目標元素觸發
•drop , 在目標元素上釋放鼠標觸發
但是，需要注意的是：在目標元素中dragover和drop事件中要阻止默認行為（拒絕被拖放），否則拖放不能被實現！
=======================================================================================
DataTransfer對象：專門用於存放拖放時要攜帶的數據，可以被設置為拖放事件的dataTransfer屬性。
三個屬性：
•effectAllowed : 設置光標樣式(none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized)
•effectAllowed：設置拖放操作的視覺效果
•types：存入數據的種類，字符串的偽數組
•files：獲取外部拖拽的文件，返回一個fileList列表，filesList下有個type屬性，返回文件的類型
4個方法：
•setData() : 設置數據 key和value(必須是字符串)
•getData() : 獲取數據，根據key值，獲取對應的value
•clearData()：清除DataTransfer對象存放的數據
•setDragImage(imageUrl,log x,long y)：用img元素來設置拖放圖標
var dt=e.dataTransfer;//作為拖放事件的dataTransfer屬性 dt.effectAllowed='copy';//設置光標樣式 dt.setData('text/plain','hello');//設置拖放文字 dt.setDragImage(dragIcom,-10,-10);//設置拖放圖標