點擊上傳
利用 type="file" 的 input，上面覆蓋一個 div 或者其他元素，點擊該元素時觸發(fā) input 的click事件，通過 e.target.files 獲取上傳的文件的信息，最后通過 Ajax 請求將 flies 數據發(fā)送至服務器。
<input type="file" id="fileInput" name="fileselect" multiple>
拖拽上傳
利用 HTML5 drag & drop 拖拽與拖放，在 drop 事件中通過 e.dataTransfer.files 獲取文件。
const imgUrl = window.webkitURL.createObjectURL(fileList[0]); //預覽圖URL
const filename = fileList[0].name; //圖片名稱
| 名稱 | 解釋 | 作用對象/值 |
|---|---|---|
| DataTransfer 對象 | 拖拽對象用來傳遞的媒介，一般使用為Event.dataTransfer | / |
| dragstart 事件 | 拖拽元素開始被拖拽的時候觸發(fā) | 被拖曳元素 |
| dragenter 事件 | 拖曳元素進入目標元素的時候觸發(fā) | 目標元素 |
| dragover 事件 | 拖拽元素在目標元素上移動的時候觸發(fā) | 目標元素 |
| drop 事件 | 被拖拽的元素在目標元素上同時鼠標放開觸發(fā) | 目標元素 |
| dragend 事件 | 拖拽完成后觸發(fā) | 被拖曳元素 |
| Event.preventDefault() 方法 | 用drop事件時要阻止瀏覽器的默認動作，默認的動作是顯示這個圖片或是相關信息，并不是真的執(zhí)行drop | / |
| Event.effectAllowed 屬性 | 拖拽的效果，在 dragenter 和 dragover 事件的事件處理程序中，如果這個效果不是用戶要求的動作，那就應該修改dropEffect 的值 | copy: 復制到新的位置；move: 移動到新的位置；link: 建立一個源位置到新位置的鏈接；none: 禁止放置（禁止任何操作）. |
