浏览器 实现复制粘贴 上传图片 js实现粘贴图片预览功能

产品大大，突然收到用户反馈说，每次上传图片选择图片，太慢了 能不能 实现复制粘贴功能，直接在桌面上 复制下图片， ctrl + v 就可以 是实现上传了， 哎 程序员太难了

但是 大概应该是这个样子了

是不是 这样就 实现效果了呢

其实这个是元素的一个 paste事件 监听， 但是 是有条件的哈

（例如，在 textarea 标签 或者 contenteditable 属性设置为 true的元)

<textarea name="" id="" cols="30" rows="10"></textarea><img src="" alt="">

document.querySelector('textarea').addEventListener('paste', (event) => {const file = event.clipboardData.items[0].getAsFile()var reader = new FileReader();alert('粘贴成功!');reader.onload = function({target}) {setTimeout(() => {$('img').attr('src', target.result)}, 500)}reader.readAsDataURL(file);event.preventDefault();});

主要是 clipboardData 这个数据对象呢 不知道的话 还真不好实现 哎

关注我 持续更新 前端知识