拖拽API
屬性
- draggable 設(shè)置為true 可以被拖拽
拖拽事件
- ondragstart 開始被拖動的時候觸發(fā) 綁定給被拖動的元素
- ondrag 拖動的過程總被連續(xù)觸發(fā) 綁定給被拖動的元素
- ondragend 停止拖動的時候的觸發(fā) 綁定給被拖動的元素
- ondragenter 當(dāng)被拖拽的元素進(jìn)入到目標(biāo)元素 綁定給目標(biāo)元素 用于進(jìn)入目標(biāo)去區(qū)域時 目標(biāo)區(qū)域樣式改變
- ondrageover 當(dāng)被拖拽的元素在目標(biāo)元素內(nèi)移動 綁定給目標(biāo)元素 需要組織默認(rèn)的動作
event.preventDefault() - ondrageleave 當(dāng)被拖拽的元素離開目標(biāo)元素 綁定給目標(biāo)元素
- ondrop 在目標(biāo)元素內(nèi)停止拖拽 綁定給目標(biāo)元素
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ā)
XHR2
關(guān)于
- XMLHttpRequest 簡稱 XHR
- XMLHttpRequest level2 簡稱XHR2
- XHR2在 XHR的基礎(chǔ)上新增了 好多 屬性 事件
- 新增FormData對象 XMLHttpRequestUpload對象
FormData
屬性
- readyState 請求響應(yīng)狀態(tài)
- status HTTP狀態(tài) 404/200/503/403/304
- responseText 響應(yīng)內(nèi)容
- timeout 超時時間 xhr2
方法
- abort()
- open()
- send()
- XHR2沒有新增方法
事件
- readystatechagne
- load 請求成功完成時觸發(fā) XHR2
- progress 進(jìn)度事件 下載重復(fù)觸發(fā)大約50ms觸發(fā)一次 XHR2
- error 請求失敗時觸發(fā) XHR2
- loadstart 請求開始時觸發(fā) XHR2
- loadend 請求結(jié)束時觸發(fā) 無論成功都會觸發(fā) XHR2
- abort 請求中斷時觸發(fā) XHR2
- timeout 請求超時時觸發(fā) XHR2
