HTML5文件操作+上传+文件拖拽（案例）

js有两种机制：事件机制、io机制

文件操作对象：

Blob 通过二进制原始数据读取

file 读取单个文件对象

fileList 读取多个文件对象

fileReader 读取文件信息

file和fileList 的属性方法

1、name 名称

2、size 文件字节长度

3、type 文件类型

4、lastModified 最后修改日期

获取单个文件:

var file = document.getElementById("file").files[0];

获取多个文件：

var file = document.getElementById("file").files;

fileReader属性和方法

readAsBinaryString(file) 以二进制读取

readAsText(文件,"utf-8") 以某种字符编码读取

readAsDataURL(file) 获取一个对象路径,读取对象,

abort() 中断读取

reslut 获取读取对象的信息

loaded() 字节数

slice(开始位置，步长) 分段读取方法

fileReader事件

onloadstart 读取文件开始时触发

onprogress 读取文件过程中触发

onload 读取文件成功完成时触发

onabort 读取文件中断时触发

onloadend 读取文件完成时触发 (无论成功与否)

onerror 获取错误事件信息

文件拖拽

如果要实现文件拖拽，必须在标签里设置拖拽属性 draggable = true

例如 ：

拖拽事件

ondragstart：鼠标悬停到被拖拽元素上，开始触发;

ondragEnter：拖拽元素进入目标元素，开始触发;

ondragover：拖拽元素在目标元素上移动时触发;

ondrop：拖拽元素进入目标元素，并且鼠标松开时触发;

ondragend：拖拽完成时触发

属性和方法

#### getData() 获取数据

#### setData(类型，内容) 设置数据

#### preventDefault() 启动元素放置事件

#### dropEffect() 被拖动元素的权限设置

  none 不能放置在目标元素上

  move 可以在目标元素上移动

  copy 拖拽元素允许被复制到目标元素里

  link 可以获得拖拽元素地址

#### effectAllowed() 允许拖动的效果

  none 不允许有任何行为

  copy 只允许复制

  move 只允许移动

  link 只允许打开链接

  copylink 复制和打开链接

  copymove 复制和移动

  linkmove 移动和打开链接

  all 所有都允许

操作案例：

 

 代码:

    
    
    
    
    


    
    上传
    

        
显示上传图片
        
垃圾桶