拖拽API
屬性
- draggable 設(shè)置為true 可以被拖拽
拖拽事件
- ondragstart 開始被拖動的時候觸發(fā) 綁定給被拖動的元素
- ondrag 拖動的過程總被連續(xù)觸發(fā) 綁定給被拖動的元素
- ondragend 停止拖動的時候的觸發(fā) 綁定給被拖動的元素
- ondragenter 當被拖拽的元素進入到目標元素 綁定給目標元素 用于進入目標去區(qū)域時 目標區(qū)域樣式改變
- ondrageover 當被拖拽的元素在目標元素內(nèi)移動 綁定給目標元素 需要組織默認的動作
event.preventDefault()
- ondrageleave 當被拖拽的元素離開目標元素 綁定給目標元素
- ondrop 在目標元素內(nèi)停止拖拽 綁定給目標元素
dataTransfer 對象
文件API
上傳input
- 多文件上傳 設(shè)置屬性 multiple
- 限制上傳文件的格式 屬性
accept="image/jpeg" accept="text/html" image/*
FileList對象
- 是用戶上傳或者拖拽到瀏覽器的 文件的集合
- 可以通過 inputElement.files 來獲取
- 是一個類數(shù)組對象 由File對象組成
File對象
- 屬性 name
- 屬性 size
- 屬性 type
- 屬性 lastModified
- 屬性 lastModifiedDate
FileReader
屬性
- result 讀取結(jié)果
- error 錯誤內(nèi)容
- readyState 讀取狀態(tài)
方法
- readAsText() 把文件讀取為文本
- readyAsDataURL() 讀取為base64圖片編碼
- readyAsArrayBuffer()
- readyAsBinaryString()
- abort() 終止讀取操作
事件
- onerror 讀取錯誤時觸發(fā)
- onabort 讀取中斷時觸發(fā)
- onloadstart 讀取開始時觸發(fā)
- onload 讀取成功時觸發(fā)
- onloadend 讀取結(jié)束時 不論成功或失敗
- 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ū)域</h3>
<div id="box" name="box"></div>
<script>
//獲取目標元素
var box = document.querySelector("#box");
//給目標元素綁定事件
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(); //阻止默認的動作
}, false);
box.addEventListener("drop", function(e){
e.preventDefault(); //阻止瀏覽器默認行為
//遍歷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對象
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)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
