H5新增内容

FIleReader文件读取API

input 给input标签添加multiple属性,就可以选择多个文件

file对象

lastModified:1496884474143     //(毫秒)
lastModifiedDate:Thu Jun 08 2017 09:14:34 GMT+0800 (中国标准时间)
name:"js初级回顾.txt"        //文件名
size:0                     //文件大小
type:"text/plain"        //文件类型

FileReader使用方式:

1.构建FileReader实例
2.选择要是用的读取方式,如 readAsDataURl() 将文件对象传递给该方法
3,监听读取完成的事件 onload ,通过 this.result 得到读取结果
4,其他事件监听

读取方式

fr.readAsDataURL(files);//接收参数是文件对象
fr.readAsText(files); 以文本方式读取选中文件
fr.readAsBinaryString(files); 以二进制的方式读取文件

input事件

onload 读取完成
onloadstart 开始读取
onloaddend 结束读取 无论成功失败都会触发
onerror 错误触发
onabort 中断读取时触发

abort() 中断读取

drag

draggable="true"
表示允许拖拽

添加即为ture的属性有:

disabled     checked     multiple    selected  
draggable(允许元素被拖拽)  contenteditable(允许元素可被编辑)

不支持IE7,8

浏览器默认禁止在元素上drop (禁止将其他元素拖拽到目标元素上放手)
需要在dropover时阻止浏览器的默认事件,才得以触发ondrop.

拖拽的生命周期

 dragstart---drag---dragenter---dragover---dragleave---drop---drapend