拖拽API

屬性

• draggable 設(shè)置為 draggable=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)元素 若想觸發(fā)drop時(shí)間,必須阻止默認(rèn)動(dòng)作 event.preventDefault()
• ondrageleave 當(dāng)被拖拽的元素離開目標(biāo)元素 綁定給目標(biāo)元素
• ondrop 在目標(biāo)元素內(nèi)停止拖拽 綁定給目標(biāo)元素

dataTransfer 對象

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

文件API

上傳input

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

FileList對象

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

File對象

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

FileReader

屬性

• result 讀取結(jié)果
• error 錯(cuò)誤內(nèi)容
• readyState 讀取狀態(tài)

方法

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

事件

• onerror 讀取錯(cuò)誤時(shí)觸發(fā)
• onabort 讀取中斷時(shí)觸發(fā)
• onloadstart 讀取開始時(shí)觸發(fā)
• onload 讀取成功時(shí)觸發(fā)
• onloadend 讀取結(jié)束時(shí) 不論成功或失敗
• onprogress 讀取過程中多次觸發(fā)

綜合使用:

    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

構(gòu)造

• new FormData([formElement])

方法

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

在Ajax中的使用

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

XHR2新增屬性

• timeout

XHR新增的事件

• timeout 請求超時(shí)時(shí)觸發(fā)
• error 請求失敗時(shí)
• abort 請求中斷時(shí)
• load 響應(yīng)成功后
• loadstart 開始請求時(shí)
• loadend 結(jié)束響應(yīng)時(shí)
• progress 請求響應(yīng)過程中連續(xù)觸發(fā)

ProgressEvent

• 屬性 loaded 當(dāng)前下載了多少字節(jié)
• 屬性 total 總的字節(jié)數(shù)
• 屬性 lengthComputable 長度是否可計(jì)算

XMLHttpRequestUpload 對象

作用

• 提供了各種事件來監(jiān)聽文件上傳的進(jìn)度
• 常用progress事件批狐。 獲取progressEvent

構(gòu)建

• xhr.upload

事件

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