拖拽API
屬性
- draggable 設(shè)置為true 可以被拖拽
拖拽事件
- ondragstart 開始被拖動(dòng)的時(shí)候觸發(fā) 綁定給被拖動(dòng)的元素
- ondrag 拖動(dòng)的過程總被連續(xù)觸發(fā) 綁定給被拖動(dòng)的元素
- ondragend 停止拖動(dòng)的時(shí)候的觸發(fā) 綁定給被拖動(dòng)的元素
- ondragenter 當(dāng)被拖拽的元素進(jìn)入到目標(biāo)元素 綁定給目標(biāo)元素 用于進(jìn)入目標(biāo)去區(qū)域時(shí) 目標(biāo)區(qū)域樣式改變
- ondrageover 當(dāng)被拖拽的元素在目標(biāo)元素內(nèi)移動(dòng) 綁定給目標(biāo)元素 需要組織默認(rèn)的動(dòng)作
event.preventDefault()
- ondrageleave 當(dāng)被拖拽的元素離開目標(biāo)元素 綁定給目標(biāo)元素
- ondrop 在目標(biāo)元素內(nèi)停止拖拽 綁定給目標(biāo)元素
dataTransfer 對(duì)象
文件API
上傳input
- 多文件上傳 設(shè)置屬性 multiple
- 限制上傳文件的格式 屬性
accept="image/jpeg" accept="text/html" image/*
FileList對(duì)象
- 是用戶上傳或者拖拽到瀏覽器的 文件的集合
- 可以通過 inputElement.files 來(lái)獲取
- 是一個(gè)類數(shù)組對(duì)象 由File對(duì)象組成
File對(duì)象
- 屬性 name
- 屬性 size
- 屬性 type
- 屬性 lastModified
- 屬性 lastModifiedDate
FileReader
屬性
- result 讀取結(jié)果
- error 錯(cuò)誤內(nèi)容
- readyState 讀取狀態(tài)
方法
- readAsText() 把文件讀取為文本
- readyAsDataURL() 讀取為base64圖片編碼
- readyAsArrayBuffer()
- readyAsBinaryString()
- abort() 終止讀取操作
事件
- onerror 讀取錯(cuò)誤時(shí)觸發(fā)
- onabort 讀取中斷時(shí)觸發(fā)
- onloadstart 讀取開始時(shí)觸發(fā)
- onload 讀取成功時(shí)觸發(fā)
- onloadend 讀取結(jié)束時(shí) 不論成功或失敗
- onprogress 讀取過程中多次觸發(fā)
拖拽外部圖片案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#drag_box{
width:100px;
height:100px;
border:1px solid orange;
background:#ccc;
cursor: pointer;
}
#box{
width:100%;
height:400px;
background:#eee;
margin:10px 0px;
}
#box img{
margin:5px;
max-height: 150px;
}
.over{
border:2px dashed #ccc;
transform: scale(0.9, 0.9);
}
</style>
</head>
<body>
<h3>請(qǐng)把文件夾中的圖片拖到下面區(qū)域</h3>
<div id="box" name="box"></div>
<script>
//獲取目標(biāo)元素
var box = document.querySelector("#box");
//給目標(biāo)元素綁定事件
box.addEventListener("dragenter", function(){
this.classList.add('over');
}, false);
box.addEventListener("dragleave", function(){
this.classList.remove("over");
}, false);
box.addEventListener("dragover", function(e){
e.preventDefault(); //阻止默認(rèn)的動(dòng)作
}, false);
box.addEventListener("drop", function(e){
e.preventDefault(); //阻止瀏覽器默認(rèn)行為
//遍歷FileList
[].forEach.call(e.dataTransfer.files, function(itemFile){
//讀取文件
readImage(itemFile);
})
this.classList.remove("over"); //恢復(fù)樣式
},false);
/**
* 讀取圖片
* @param File fileObj
*/
function readImage(fileObj) {
//創(chuàng)建FileReader對(duì)象
var frObj = new FileReader();
//監(jiān)聽讀取成功
frObj.onload = function(){
var img = document.createElement("img");
img.src = frObj.result;
document.querySelector("#box").appendChild(img);
}
//讀取
frObj.readAsDataURL(fileObj);
}
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
