拖拽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
  Web存储
  localStorage
  sessionStorage