拖拽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