拖拽API

屬性

• draggable 設置為 draggable=true 可以被拖拽

拖拽事件

• ondragstart 開始被拖動的時候觸發 綁定給被拖動的元素
• ondrag 拖動的過程總被連續觸發 綁定給被拖動的元素
• ondragend 停止拖動的時候的觸發 綁定給被拖動的元素
• ondragenter 當被拖拽的元素進入到目標元素 綁定給目標元素 用于進入目標去區域時 目標區域樣式改變
• ondrageover 當被拖拽的元素在目標元素內移動 綁定給目標元素 若想觸發drop事件,必須阻止默認動作 event.preventDefault()
• ondrageleave 當被拖拽的元素離開目標元素 綁定給目標元素
• ondrop 在目標元素內停止拖拽 綁定給目標元素

dataTransfer 對象

• e.dataTransfer.setData('傳輸名',傳輸對象) 用于提交傳輸對象
• e.dataTransfer.getData('傳輸名') 用于獲取傳輸對象
• e.dataTransfer.files 獲取被drop的外部文件

文件API

上傳input

• 多文件上傳 設置屬性 multiple
• 限制上傳文件的格式 屬性 `accept= " image/jpeg text/html image/* "

FileList對象

• 是用戶上傳或者拖拽到瀏覽器的 文件的集合
• 可以通過 inputElement.files 來獲取
• 是一個類數組對象 由File對象組成

File對象

• 屬性 name
• 屬性 size
• 屬性 type
• 屬性 lastModified
• 屬性 lastModifiedDate

FileReader

屬性

• result 讀取結果
• error 錯誤內容
• readyState 讀取狀態

方法

• readAsText() 把文件讀取為文本
• readAsDataURL() 讀取為base64圖片編碼
• readAsArrayBuffer()
• readAsBinaryString()
• abort() 終止讀取操作

事件

• onerror 讀取錯誤時觸發
• onabort 讀取中斷時觸發
• onloadstart 讀取開始時觸發
• onload 讀取成功時觸發
• onloadend 讀取結束時 不論成功或失敗
• onprogress 讀取過程中多次觸發

綜合使用:

    var box = document.querySelector("#box");
    
    box.addEventListener("dragover", function(e) {
        e.preventDefault();
    }, false);

    box.addEventListener("drop", function(e) {
        e.preventDefault();

        [].forEach.call(e.dataTransfer.files, function(itemFile) {
            console.log(e.dataTransfer.files)
            readImage(itemFile);
        })

    }, false);

    function readImage(fileObj) {
        var frObj = new FileReader();

        frObj.onload = function() {
            var img = document.createElement("img");
            img.src = frObj.result;
            document.querySelector("#box").appendChild(img);
        }

        frObj.readAsDataURL(fileObj);
    }

XHR2

FormData

構造

• new FormData([formElement])

方法

• append(key, value)
• delete(key)
• get(key)
• set(key,value)
• ....

在Ajax中的使用

• XHR 作為send()方法的參數 發送post請求
• jquery
  • 設置data的值為 FormData對象
  • 還需要設置 processData:false和contentType:false

XHR2新增屬性

• timeout

XHR新增的事件

• timeout 請求超時時觸發
• error 請求失敗時
• abort 請求中斷時
• load 響應成功后
• loadstart 開始請求時
• loadend 結束響應時
• progress 請求響應過程中連續觸發

ProgressEvent

• 屬性 loaded 當前下載了多少字節
• 屬性 total 總的字節數
• 屬性 lengthComputable 長度是否可計算

XMLHttpRequestUpload 對象

作用

• 提供了各種事件來監聽文件上傳的進度
• 常用progress事件。 獲取progressEvent

構建

• xhr.upload

事件

• error
• timeout
• load
• loadstart
• loadend
• abort
• progress