大家好，我是魔王哪吒，很高興認識你~~
哪吒人生信條：如果你所學的東西 處於喜歡 才會有強大的動力支撐。
每天學習編程，讓你離夢想更新一步，感謝不負每一份熱愛編程的程式設計師，不論知識點多麼奇葩，和我一起，讓那一顆四處流蕩的心定下來，一直走下去，加油，2021加油！歡迎關注加我vx:xiaoda0423，歡迎點讚、收藏和評論
不要害怕做夢，但是呢，也不要光做夢，要做一個實幹家，而不是空談家，求真力行。投魔王哪吒一票，謝謝記得為我投票哦！！！（魔王哪吒）
前言如果這篇文章有幫助到你，❤️關注+點讚❤️鼓勵一下作者，接收好挑戰了嗎？文章公眾號首發，關注 程式設計師哆啦A夢 第一時間獲取最新的文章
筆芯❤️~
知識點拖拽的體驗，你享受過嗎，在HTML5之前，可以使用事件mousedown，mousemove，mouseup巧妙實現頁面的拖放操作，但注意拖放的操作範圍只是局限在瀏覽器內部。
而HTML5的拖放API功能直接實現拖放操作，而且拖放的範圍已經超出瀏覽器的邊界，HTML5提供的文件api支持拖拽多個文件並上傳。
要學會掌握html5中的拖放api和 文件api，光標拖放事件，從web網頁上訪問本地文件系統。
拖放api在html5中的拖放api重點：
第一，為頁面元素提供了拖放特性；
第二，為光標增加了拖放事件；
第三，提供了用於存儲拖放數據的DataTransfer對象
draggable特性draggable特性用於定義元素是否允許用戶拖放：提供了三個值
true,false,auto
把元素變成可以拖放的：
<div draggable="true"></div>img元素和a元素默認是可以拖放的
光標拖放事件在html5中提供了7個與拖放相關的光標事件：
按照時間的順序：
第一，開始拖拽時觸發的事件，事件的作用對象是被拖拽的元素-dragstart事件
第二，拖放過程中觸發的事件，事件的作用對象是被拖拽的元素-drag事件
第三，在拖放的元素進入本元素的範圍內時觸發，事件的作用對象是拖放過程中光標經過的元素-dragenter元素
第四，在拖放的元素正在本元素的範圍內移動時觸發，事件的作用對象是拖放過程中光標經過的元素-dragover元素
第五，在拖放的元素離開本元素的範圍時觸發，事件的作用對象是拖放過程中光標經過的元素-dragleave元素
第六，在拖放的元素被拖放到本元素中時觸發，事件的作用對象是拖放的目標元素-drop元素
第七，在拖放操作結束時觸發，事件的作用對象是被拖拽的元素-dragend事件
DataTransfer對象在html5中提供了DataTransfer對象，用來支持拖拽數據的存儲。
實現拖放的過程中數據交換。
DataTransfer對象：
屬性
第一，dropEffect屬性：用來設置或獲取拖拽操作的類型 和 要顯示的光標類型。
如果該操作的效果與起初設置的effectAllowed效果不符，則拖拽操作失敗。可以設置修改，包含值可為：none, copy, link, move
第二，effectAllowed屬性：用來設置或獲取數據傳送操作可應用於操作對象的源元素，指定值：none, copy, copyLink, copyMove, link, linkMove, move, all 和 uninitialized
第三，type屬性：獲取在dragstart事件出發時為元素存儲數據的格式，如果是外部文件的拖拽，則返回Files。
第四，files屬性：獲取存儲在DataTransfer對象中的正在拖放的文件列表FileList，可以使用數組的方式去遍歷。
方法
第一，clearData()方法：清除DataTransfer對象中存放的數據：
clearData([sDataFormat])[sDataFormat]為可選參數，取值可能為：Text,URL,File,HTML,Image,設置後，可刪除指定格式的數據，如果省略該參數，則清除全部數據。
第二，setData()方法：向內存中的DataTransfer對象添加指定格式的數據：
setData([sDataFormat],[data])第三，getData()方法：從內存的DataTransfer對象中獲取數據
getData([sDataFormat])第四，setDragImage()方法：設置拖放時跟隨光標移動的圖片
setDragImage([imgElement],[x],[y])[imgElement]表示圖片對象，[x],[y]分別表示相對於光標位置的橫坐標和縱坐標
第五，addElement()方法：添加一起跟隨拖放的元素，如果想讓某個元素跟隨被拖動元素一起被拖放，則使用此方法
addElement([element])[element]表示一起跟隨拖動的元素對象
示例// 源元素
<div id="dragSource" draggable="true">
拖動
<img src="images/dadaqianduan.png" width="50" height="50">
</div>
// 目標元素
<div id="dropTarget"></div>添加ondragstart監聽事件，給拖放的源元素添加ondragstart監聽事件，在事件觸發時把源元素裡的內容追加至dataTransfer對象中。
最後，把添加監聽事件的處理函數DragStart()追加到window.onload事件中。
function DragStart() {
var source = document.getElementById("dragSource"); // 拖放源元素
// 監聽dragstart事件，作用在源元素上
source.addEventListener("dragstart", function(e){
e.dataTransfer.setData('text/plain', e.target.innerHTML);
// 向dataTransfer對象中追加數據
e.dataTransfer.effectAllowed="copy";
},false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load",DragStart,false);添加dragover監聽事件，給拖放的目標元素添加dragover監聽事件，在事件觸發時改變目標元素的樣式，並屏蔽瀏覽器的默認處理事件。
把添加監聽事件的處理函數DragOver()追加到window.onload事件中，對於目標元素preventDefault()，必須取消瀏覽器的默認處理，否則將無法實現拖放功能。
function DragOver() {
// 拖放目標元素
var target = document.getElementById('dropTarget');
// 監聽dragover事件，作用在目標元素上
target.addEventListener("dragover", function(e){
// 改變樣式
this.className = "dragover";
// 取消瀏覽器的默認處理
e.preventDefault();
},false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load", DragOver, false);給拖放的目標元素添加ondrop監聽事件，事件觸發時獲取dataTransfer對象中的數據，並追加到目標元素中，同時還還原了樣式。
把添加監聽事件的處理函數Drop()追加到window.onload事件中。
function Drop(){
// 拖放目標元素
var target = document.getElementById('dropTarget');
// 監聽drop事件，作用在目標元素上
target.addEventListener('drop',function(e){
var data = e.dataTransfer.getData('text/plain');
//取得dataTransfer對象中的數據
this.innerHTML += data;
e.dataTransfer.dropEffect = "copy";
// 還原樣式
this.className=""
},false);
}
// 添加函數DragStart到window.onload監聽事件
window.addEventListener("load",Drop, false);
文件api在html5中提供了關於文件操作的文件api,通過編程方式選擇和訪問文件數據。
如：FileList對象，File對象，Blob接口，FileReader接口
增加的標籤特性在html5中file類型的表單元素增加了multiple特性和accept特性
multiple特性
multiple特性可允許用戶同時選擇多個上傳文件。
<input type="file" multiple/>得到一個FileList對象，是一個File對象的列表
accept特性
規定了可通過文件上傳提交的文件類型，實現了打開文件窗口時，默認選中指定的文件類型：
<input type="file" accept="image/gif"/>
FileList對象和File對象在FileList對象裡的每一個文件又是一個File對象
示例：
<form action="" method="post">
<input type="file" id="files" multiple/>
<input type="button" value="顯示文件" onclick="showFiles()"/>
<p id="msg"></p>
</form>
function ShowFiles(){
// 獲取FileList對象
var fileList = document.getElementById("files").files;
var msg = document.getElementById("msg");
var file;
for(var i=0; i<fileList.length; i++){
file = fileList[i];
msg.innerHTML += file.name + ";<br/>";
}
}
Blob對象Blob對象表示原始二進位數據，該Blob接口有兩個屬性：size和type
第一，size屬性，表示Blob對象的字節長度，可以藉助
FileReader接口讀取Blob對象的二進位數據，如果Blob對象沒有字節數，則為0
第二，type屬性，表示Blob對象的MIME類型，未知 類型，則返回一個 空字符串。
第三，slice()方法，使用slice()方法可以實現文件的切割，並返回一個新的Blob對象。
File對象 和 Blob對象
File對象 繼承了 Blob對象，所以 File對象 也可以使用 Blob對象的屬性和方法（File對象可以使用size屬性 和 type屬性）
獲取文件的大小和類型示例：
<form action="" method="post">
<input type="file" id="files" multiple accept="image/*"/>
<input type="button" value="顯示文件數據" onclick="ShowType()"/>
<p id="msg"></p>
</form>
function ShowType(){
// 獲取FileList對象
var files = document.getElementById("files").files;
var msg = document.getElementById("msg");
var file;
for(var i=0; i<files.length; i++){
file=fileList[i];
msg.innerHTML += "字節長度："+file.size+";<br/>";
msg.innerHTML += "文件類型："+file.type+";<br/>";
}
}
FileReader接口卡FileReader接口 提供了 一些 讀取文件的方法 與 一個波愛護讀取結果的 事件模型。
FileReader接口 主要把 文件讀入內存， 並讀取文件中 的數據。
提前檢測瀏覽器是否支持，實現該接口FileReader
if(typeof FileReader == "undefined"){
console.log();
} else {
var reader = new FileReader();
}FileReader接口三個屬性：
readyState屬性，只讀
讀取文件的狀態：
EMPTYP，值為0， 表示新的FileReader接口已經構建，且 沒有調用 任何讀取方法 時的默認狀態。LOADING，值為1，表示有讀取文件的方法正在讀取 File 對象 或 Blob 對象，且沒有錯誤發生。DONE，值為2，表示讀取文件結束，可能整個 File對象 或 Blob對象 已經完全 讀入內存 中，在文件讀取的過程中出現錯誤，或在讀取過程中使用了 abort()方法 強行中斷。result屬性，只讀
獲取已經讀取的文件 數據。如是 圖片，將返回 base64 格式的圖片數據。
error屬性，只讀
獲取讀取文件過程中出現的錯誤：4種類型
NotFoundError，找不到讀取的資源文件。FileReader接口 會 返回 NotFoundError 錯誤，同時讀取文件 的方法也會 拋出 NotFoundError 錯誤異常
FileReader 接口 會返回 SecurityError 錯誤，同時讀取文件的 方法也會拋出 SecurityError 錯誤異常
NotReadableError，無法讀取的錯誤。FileReader 接口會 返回 NotReadableError 錯誤，同時讀取文件 的方法 也會拋出 NotReadableError 錯誤異常
通常是數據的URL表示的網址 長度受到 限制
FileReader接口的方法第一，readAsArrayBuffer() 方法，將文件讀取為 數組緩衝區
readAsArrayBuffer(<blob>);其中的<blob>表示一個Blob對象的文件。
readAsArrayBuffer()方法 會把該 Blob 對象 的文件讀取為 數組緩衝區
第二，readAsBinaryString()方法，將文件讀取為二進位字符串。
readAsBinaryString(<blob>);其中的<blob>表示一個Blob對象的文件。
readAsBinaryString()方法 會把該 Blob 對象 的文件讀取為二進位字符串
第三，readAsText() 方法，將文件讀取為二進位字符串
readAsText(<blob>,<encoding>);
// 讀取為文本，encoding 為文本的編碼方式第四，readAsDataURL()方法 將文件讀取為 DataURL 字符串：
readAsDataURL(<blob>);
// 讀取為DataURL字符串第五，abort()方法，中斷讀取操作
abort() // 沒有參數接口的事件
loadstart事件，當開始讀取數據時 觸發的事件loadend事件，當結束讀取數據時觸發的事件，數據讀取可能成功也可能失敗FileReader接口示例：
// 讀取文件
function ReadAs(action){
var blob = document.getElementById("files").files[0];
if(blob){
var reader = new FileReader(); // 聲明接口對象
// 讀取文件的方法
switch(action.toLowerCase()){
case "binarystring":
reader.readAsBinaryString(blob);
break;
case "arraybuffer":
reader.readAsArrayBuffer(blob);
break;
case "text":
reader.readAsText(blob);
break;
case "dataurl":
reader.readAsDataURL(blob);
break;
}
reader.onload = function(e){
// 訪問FileReader 的接口屬性 result,把讀取到內存裡的內容獲取出來
var result = this.result;
// 如果是圖文件
if(/image\/\w+/.test(blob.type) && action.toLowerCase() == "dataurl"){
document.getElementById("result").innerHTML = "<img src='" + result + "'/>";
} else {
document.getElementById("result").innerHTML = result；
}
}
}
}
FileReader接口的事件示例：
<form action="" method="post">
<input type="file" id="files" multiple accept="image/*"/>
<input type="button" value="讀取文件" onclick="FileReaderEvent()"/>
<p id="message"></p>
</form>
var blob = document.getElementById("files").files[0];
var message = document.getElementById("message");
var reader = new FileReader();
// 添加 loadstart 事件
reader.onloadstart = function(e){
}
// 添加 progress 事件
reader.onprogress = function(e){
}
// 添加 load 事件
reader.onload = function(e){
}
// 添加 abort 事件
reader.onabort = function(e){
}
// 添加 error 事件
reader.onerror = function(e){
}
// 添加 loadend 事件
reader.onloadend = function(e){
}
圖片拖入瀏覽器示例：
定義一個拖放的 drop 事件處理函數 dropHandle()
定義一個用於加載單個 文件的函數 loadImg()
// 目標元素的變量
var target;
// drop 事件處理函數
function dropHandle(e){
// 獲取拖拽的文件
var fileList = e.dataTransfer.files,
fileType;
// 遍歷
for(var i=0; i<fileList.length; i++){
fileType = fileList[i].type;
if(fileType.indexOf('image') == -1) {
alert('');
return;
}
// 加載單個文件
loadImg(fileList[i]);
}
}
// 加載
function loadImg(file){
// 聲明接口對象
var reader = new FileReader();
// 添加load事件處理
reader.onload = function(e){
var oImg = document.createElement("img");
oImg.src = this.result;
target.appendChild(oImg);
}
// 讀取文件
reader.readAsDataURL(file);
}頁面加載完成後，可獲取target目標容器，是用於存放拖放進的圖片。
給target容器添加 dragover事件處理 和 drop 事件處理
window.onload = function() {
// 獲取目標元素
target = document.getElementById('dropTarget')
// 給目標元素添加 dragover 事件處理
target.addEventListener('dragover', function(e){
e.preventDefault();
},false);
target.addEventListener('drop', dropHandle, false);
}❤️關注+點讚+收藏+評論+轉發❤️，原創不易，鼓勵筆者創作更好的文章
點讚、收藏和評論我是Jeskson(達達前端)，感謝各位人才的：點讚、收藏和評論，我們下期見！(如本文內容有地方講解有誤，歡迎指出☞謝謝，一起學習了)
我們下期見！文章持續更新，可以微信搜一搜「 程式設計師哆啦A夢 」第一時間閱讀，回復【資料】有我準備的一線大廠資料，本文 http://www.dadaqianduan.cn/#/ 已經收錄
github收錄，歡迎Star：https://github.com/webVueBlog/WebFamily