获取拖拽和剪贴板中的文件

# 拖拽

拖拽会触发相关事件，就像 mouse 相关的事件一样

• dragstart 拖动开始，该事件添加到被拖动的元素
• dragenter 拖动行为到达某元素上方，该事件添加到被鼠标拖动时经过的元素
• dragleave 与上一条相对应
• dragover / dragout 这里需要注意的是，某些时候即便不需要使用这两个事件，也可能会触动事件默认行为，可能需要手动禁用其默认行为
• drop 拖动结束事件，添加到拖动放置的元素上面以触发相关行为

从操作系统桌面拖动文件到浏览器，同样会触发拖动事件。我们需要做的就是在 drop 事件触发以后，从事件对象中获取到被拖拽的文件

如果拖动图片到 div 上后松手，总是会在新标签页中打开图片，那么尝试把 div 换成 input 吧，type 属性设置为 file 即可。

 

# 剪贴板

获取剪贴板中的文件，同样需要通过一个事件，paste 事件 -> Element：paste 事件 - Web API | MDN

一般情况下，只有在光标位于可编辑区域时，才会用到粘贴来粘贴文本。如果要转化粘贴内容，需要阻止事件的默认行为。

如果要获取剪贴板中的图片来进行上传，可以将 paste 事件添加到 window 或者 document 对象上面

如果页面中防止了 input 元素，这里注意将 input 元素的 click 事件的默认行为进行阻止，避免用户点击时打开文件选择器，当然如果这本来就是需要的，则无需此动作。

 

# 复制到剪贴板的控制

上面通过 paste 事件可以获取剪贴板中的内容

同样的，可以通过 copy 事件来操控将要被复制到剪贴板中的内容

copy 事件 -> Element：copy 事件 - Web API | MDN

 

事件处理器可以通过调用 ClipboardEvent.clipboardData 属性上的 setData(format, data) 修改剪贴板内容，并通过 event.preventDefault() 取消默认行为。