必須懂得的基礎：
拖拽事件：
拖動區事件：
dragstart：開始拖動時，觸發 dragend：停止拖動時，觸發 drag：鼠標拖動過程中觸發
投放區事件：
dragenter：拖動區進入投放區觸發 dragleave：拖動區離開投放區觸發 dragover：拖動區在投放區移動時觸發 drop：拖動區在投放區放下時，觸發
note：可能受默認事件影響，方法可能不靈敏（此處用詞不好，但是便於理解），所以應調用event.preventDefault()方法
FormData：
代表一個表單對象，可以通過append('xx', xxx) 往函數裏面添加參數，但是xx必須爲字符串形式，xxx可以爲字符串型，可以是一個二進制文件，也可是File類型的文件
DataTrasnfer:
拖拽物體（文件、圖片等）用來進行信息傳輸的媒介，在拖拽事件中通過event.dataTransfer獲取
屬性和方法：
1.types 返回數據的格式
2.getData("xxx") 根據xxx獲取對象
3.setData("xxx","xxxx") 通過鍵值對的方式，設置信息（信息此處不恰當，但是便於理解）
4.clearData('xxx') 根據xxx清楚信息
5.files 返回已經投放的文件的信息數組
name：文件名稱
type：文件類型
size：文件大小
XMLHttpRequest：這裏是新版的
XMLHttpRequest可以向不同域名的服務器發出HTTP請求。這叫做 “跨域資源共享”（Cross-origin resource sharing，簡稱CORS）。
瀏覽器有個著名的同源策略，這裏瀏覽器安全的基礎，CORS 除了需要瀏覽器支持外，還要服務器同意。
XMLHttpRequest 支持直接發送FormData，就像瀏覽器進行表單提交一樣。
XMLHttpRequest 還支持進度信息（progress事件），進度分爲上傳進度和下載進度，上傳進度的事件是在XMLHttpRequest.upload 對象上，下載進度的事件是在 XMLHttpRequest 對象。每個進度事件都有三個屬性：
lengthComputable：可計算的已上傳字節 數total：總的字節 數loaded：到目前爲止上傳的字節 數
除了進度事件，還支持下面五個事件：
load事件：傳輸成功完成。abort事件：傳輸被用戶取消。error事件：傳輸中出現錯誤。loadstart事件：傳輸開始。loadend事件：傳輸結束，但是不知道成功還是失敗。
同 progress事件一樣，屬於上傳操作的事件處理函數綁定在XMLHttpRequest.upload對象上，屬性下載的直接綁定在 XMLHttpRequest 對象。
示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div {
width:200px;
height:200px;
border:1px dotted red;
text-align:center;
line-height:150px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var img1 = document.getElementsByTagName("img")[0];
var div1 = document.getElementsByTagName("div")[0];
img1.ondragstart = function() {
}
img1.ondragend = function() {
}
img1.ondrag = function() {
}
div1.ondragenter = function(event) {
event.preventDefault();
div1.innerHTML = "請鬆開手";
}
div1.ondragleave = function(event) {
event.preventDefault();
}
div1.ondragover = function(event) {
event.preventDefault();
}
div1.ondrop = function(event) {
event.preventDefault();
//拖入的文件必須是外部的，不能使瀏覽器內的
var files = event.dataTransfer.files[0];
var formData = new FormData();
formData.append("aa", files);
var xml = new XMLHttpRequest();
xml.open("post","xxxx"); //xxxx爲訪問上傳文件路徑
xml.send(formData);
}
}
</script>
</head>
<body>
<div id="box">
拖入上傳
</div>
<img src="1.png" draggable=true />
</body>
</html>
