实现图片拖拽上传

效果预览

拖拽相关的事件

Event On Event Handler Fires when…
drag ondrag 当拖动元素或选中的文本时触发。
dragend ondragend 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键)。
dragenter ondragenter 当拖动元素或选中的文本到一个可释放目标时触发。
dragexit ondragexit 当元素变得不再是拖动操作的选中目标时触发。
dragleave ondragleave 当拖动元素或选中的文本离开一个可释放目标时触发。
dragover ondragover 当元素或选中的文本被拖到一个可释放目标上时触发(每100毫秒触发一次)。
dragstart ondragstart 当用户开始拖动一个元素或选中的文本时触发。
drop ondrop 当元素或选中的文本在可释放目标上被释放时触发。

1: 当从操作系统向浏览器中拖动文件时,不会触发 dragstartdragend 事件。

2: 使用 e.target.files 来获取普通上传的文件,使用 e.dataTransfer.files获取拖拽上传的文件。

3: Event对象的preventDefault() 方法用来阻止事件的默认操作,例如当我们将文件拖拽到浏览器窗口中时,浏览器默认会在当前页打开这个文件。可以调用event.preventDefault();阻止它。还有<button type="submit" /> 等。

FileReader

FileReader 对象运行js异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 FileBlob 对象指定要读取的文件或数据。

其中File对象可以是来自用户在一个Input元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的 DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

####事件处理

FileReader.onabort 文件读取被中断.

FileReader.onerror 文件读取错误

FileReader.onload 文件读取完成

FileReader.onloadstart 开始读取

FileReader.onloadend 读取结束

Filereader.onprogress 读取Bold对象时触发, 可以用来做进度条

File继承自Bold, 因为 FileReader 继承自EventTarget,所以所有这些事件也可以通过addEventListener方法使用。

###本文参考文档: MDN web docs