拖拽API
屬性
- draggable 設置為true 可以被拖拽
拖拽事件
- ondragstart 開始被拖動的時候觸發 綁定給被拖動的元素
- ondrag 拖動的過程總被連續觸發 綁定給被拖動的元素
- ondragend 停止拖動的時候的觸發 綁定給被拖動的元素
- ondragenter 當被拖拽的元素進入到目標元素 綁定給目標元素 用于進入目標去區域時 目標區域樣式改變
- ondrageover 當被拖拽的元素在目標元素內移動 綁定給目標元素 需要組織默認的動作
event.preventDefault() - ondrageleave 當被拖拽的元素離開目標元素 綁定給目標元素
- ondrop 在目標元素內停止拖拽 綁定給目標元素
dataTransfer 對象
文件API
上傳input
- 多文件上傳 設置屬性 multiple
- 限制上傳文件的格式 屬性
accept="image/jpeg"accept="text/html"image/*
FileList對象
- 是用戶上傳或者拖拽到瀏覽器的 文件的集合
- 可以通過 inputElement.files 來獲取
- 是一個類數組對象 由File對象組成
File對象
- 屬性 name
- 屬性 size
- 屬性 type
- 屬性 lastModified
- 屬性 lastModifiedDate
FileReader
屬性
- result 讀取結果
- error 錯誤內容
- readyState 讀取狀態
方法
- readAsText() 把文件讀取為文本
- readyAsDataURL() 讀取為base64圖片編碼
- readyAsArrayBuffer()
- readyAsBinaryString()
- abort() 終止讀取操作
事件
- onerror 讀取錯誤時觸發
- onabort 讀取中斷時觸發
- onloadstart 讀取開始時觸發
- onload 讀取成功時觸發
- onloadend 讀取結束時 不論成功或失敗
- onprogress 讀取過程中多次觸發
XHR2
關于
- XMLHttpRequest 簡稱 XHR
- XMLHttpRequest level2 簡稱XHR2
- XHR2在 XHR的基礎上新增了 好多 屬性 事件
- 新增FormData對象 XMLHttpRequestUpload對象
FormData
屬性
- readyState 請求響應狀態
- status HTTP狀態 404/200/503/403/304
- responseText 響應內容
- timeout 超時時間 xhr2
方法
- abort()
- open()
- send()
- XHR2沒有新增方法
事件
- readystatechagne
- load 請求成功完成時觸發 XHR2
- progress 進度事件 下載重復觸發大約50ms觸發一次 XHR2
- error 請求失敗時觸發 XHR2
- loadstart 請求開始時觸發 XHR2
- loadend 請求結束時觸發 無論成功都會觸發 XHR2
- abort 請求中斷時觸發 XHR2
- timeout 請求超時時觸發 XHR2
