js实现实现ctrl+v粘贴上传图片粘贴上传图片(兼容兼容chrome、、firefox、、ie11)
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上
传了,那么这个方便的功能是如何实现的呢?
原理分析原理分析
提取操作:复制=>粘贴=>上传
在这个操作过程中,我们需要做的就是:监听粘贴事件=>获取剪贴板里的内容=>发请求上传
为方便理解下文,需要先明白几点:
我们只能上传网页图我们只能上传网页图(在网页上右键图片,然后复制在网页上右键图片,然后复制)和截图和截图(截图工具截的图片,截图工具截的图片,eg::qq截图截图),不能粘贴上传系统里的图片,不能粘贴上传系统里的图片(从从
桌面上、硬盘里复制桌面上、硬盘里复制),他们是存在完全不同的地方的。,他们是存在完全不同的地方的。
截图工具截的图与在网页点击右键复制的图是有些不同的,因此处理方式也不一样。截图工具截的图与在网页点击右键复制的图是有些不同的,因此处理方式也不一样。
知悉知悉paste event这个事件:当进行粘贴(右键这个事件:当进行粘贴(右键paste/ctrl+v)操作时,该动作将触发名为)操作时,该动作将触发名为’paste’的剪贴板事件,这个事件的的剪贴板事件,这个事件的
触发是在剪贴板里的数据插入到目标元素之前。如果目标元素(光标所在位置)是可编辑的元素(触发是在剪贴板里的数据插入到目标元素之前。如果目标元素(光标所在位置)是可编辑的元素(eg:设置了:设置了
contenteditable属性的属性的div。。textarea并不行。),粘贴动作将把剪贴板里的数据,以最合适的格式,插入到目标元素里;如并不行。),粘贴动作将把剪贴板里的数据,以最合适的格式,插入到目标元素里;如
果目标元素不可编辑,则不会插入数据,但依然触发果目标元素不可编辑,则不会插入数据,但依然触发paste event。数据在粘贴的过程中是只读的。此段是翻译于。数据在粘贴的过程中是只读的。此段是翻译于
w3.org_the-paste-action。。
可惜的是,经过试验,发现可惜的是,经过试验,发现chrome(当前最新版当前最新版)、、firefox(当前最新版当前最新版)、、ie11对对paste事件的实现并不是完全按照事件的实现并不是完全按照w3c来的,来的,
各自也有区别各自也有区别(w3c的的paste标准也因此只是草案阶段标准也因此只是草案阶段)。。
test代码及截图如下:
chrome:
<textarea ></textarea>
<div contenteditable style="width: 100px;height: 100px; border:1px solid">
</div>
<script>
document.addEventListener('paste', function (event) {
console.log(event)
})
</script>