直接剪切板粘贴上传图片的前端JS实现

这篇文章发布于 2018年09月21日,星期五,00:15,归类于 JS实例。 阅读 60421 次, 今日 11 次 28 条评论

 

一、趁热打铁

上一篇文章也和剪切板粘贴相关,主要讲的是输入框粘贴内容的体验优化,本文趁热打铁,继续介绍和剪切板API相关的一个交互功能,当当当当,就是页面Ctrl+V粘贴上传图片。

剪切板上传缩略图

二、如何获取剪切板中的图片?

不啰嗦,直接上代码:

document.addEventListener('paste', function (event) {
    var items = event.clipboardData && event.clipboardData.items;
    var file = null;
    if (items && items.length) {
        // 检索剪切板items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    }
    // 此时file就是剪切板中的图片文件
});

我们在全局document对象上绑定一个paste粘贴事件,然后遍历剪切板对象clipboardData中的items,根据type类型确定图片,并执行getAsFile()方法将其转换成二进制的file对象,此file对象和表单中的file文件上传<input>框中的file对象,或者拖拽获取的file对象是同一个东西。

然后,我们直接ajax上传这个file对象,上传就成功了,就这么简单!

三、如何上传file对象?

实际开发,我们可以借助FormData对象进行上传,示意如下:

var formData = new FormData();
formData.append('file', file);
// 其他些参数,例如用户id
formData.append('userid', 1);
// ajax上传
var xhr = new XMLHttpRequest();
// 上传结束
xhr.onload = function () {
    var json = JSON.parse(xhr.responseText);
    // ... 这里处理返回的json数据
};
xhr.open('POST', './upload.php', true);
xhr.send(formData);

如果我们就传一个图片文件,没有其他乱七八糟数据,也可以直接send file对象,例如:

// ajax上传
var xhr = new XMLHttpRequest();
// 上传结束
xhr.onload = function () {
    var json = JSON.parse(xhr.responseText);
    // ... 这里处理返回的json数据
};
xhr.open('POST', './upload.php', true);
xhr.send(file);

然后PHP后台直接file_get_contents('php://input')获取的就是图片数据了。

三、如果我想预览剪切板中的图片?

如果上传图片之前,或者上传过程中想要预览剪切板中的图像怎么办呢?也很简单,借助FileReader对象,轻轻松松几行就搞定。

var reader = new FileReader()
reader.onload = function(event) {
    // event.target.result就是图片的Base64地址啦
}
reader.readAsDataURL(file);

上面代码中的event.target.result就是图片的Base64地址,然后页面对应DOM元素位置插入如下HTML就可以看到图片效果了:

<img src="' + event.target.result + '">

四、实例demo

您可以狠狠地点击这里:JS实现页面粘贴图片直接Ajax上传demo

上传演示如下示意:

1. 复制图片
demo页面提供了图片素材,我们可以“右键-复制图片”,如下截图:

复制图片示意

2. 粘贴图片
Ctrl+V或者Commond+V粘贴。因为粘贴事件绑定在document上,因此,只有页面处于focus状态,粘贴既有效果。

粘贴示意

3. 预览同时上传
此时,即触发预览和上传,不出意外,应该下面这般模样:

上传成功与预览

由于本demo图片上传保存的最终图片均是用的剪切板中默认的同一个文件名,因此,如果多人同时上传,可能会出现被覆盖的情况,实际开发显然需要重命名哦。

本功能只能上传剪切板中的图片

本功能只能上传剪切板中的图片。

当我们使用QQ或者公司内部聊天工具中的截图工具截屏的时候,剪切板中是有截屏图片的;
当我们在任意网页中的图片上“右键-复制图片”,也是在剪切板中。

但是,但是,但是,我们在操作系统的文件夹中复制图片,不好意思,这个图片并不是在剪切板中,因此,无法上传。

这是个可能会让人困扰的地方。在windows文件夹系统中,我们复制文本类的东西,是在剪切板中,我们可以获得之;但是,复制的图片文件,不论是右键复制,还是Ctrl + C复制都不行。我曾经尝试找过“右键-复制到剪切板”这样的小工具,以便提高我们后台编辑人员的工作效率,失败了,如果谁知道有这样的工具,欢迎指教。

因此,桌面系统中的图片,目前实践下来,比较便捷的还是拖拽上传,以及文件选择框多选上传(demo参见这里)。

五、兼容性与渐进增强

自己测试了下,Chrome和Firefox浏览器都是OK的,Safari还没有测试,经验来看,应该没问题。关于是IE浏览器,并不支持。

首先,paste事件必须在contenteditable的元素中才能执行,然后get不到clipboardData中的items,所以,放弃IE即可!

本身,剪切板直接上传图片就是一个渐进增强的功能。

实际开发是这样的:

<input type="file">上传是必备;拖拽上传是标配;粘贴上传则是VIP服务,锦上添花的事情,有更好,没有也只是和以前一样。

因此,所有用到图片上传的地方,我们都可以直接大胆多一个剪切板上传功能,韩信将兵多多益善。而且ajax上传这些都是重复利用的,实际就多了一点点代码量,性价比很高。

目前实际产品开发中用的比较多的是富文本编辑器中,例如知乎的文章编辑器,剪切板图片直接复制就可以上传:

剪切板上传

看上去很高级,看了本文是不是觉得原来其实很简单,对吧。

好的体验有时候并不需要多么高深的技术,一个小小的技术tips足矣!

六、结束语

以前图片示例都使用张含韵,我这样的小站用用其实也不会有啥。不过我家领导比较胆小谨慎,老担心万一张含韵告我侵犯版权,到时候,卖房子都赔不起。我和我家领导在做决定的时候一向公平公正,意见相同的时候听我的,意见不同的时候听领导的。所以,这次,我就听了领导的话,张含韵所有图片下架,于是,数百篇文章,那是一篇一篇的过,所以版权图片全部替换掉(很多需要重新截图),花了我足足几个星期的业余时间。

然后顶替上来的图片是下面这位:

无版权

名叫吴板泉,用了一段时间,结果那是反响平平,不对,是什么响都没有。

我琢磨了下,一定是年纪偏大,太熟了,而且还带了个装逼的墨镜是什么鬼!觉得必须得重新换图,于是,迎来了下面这位,叮叮叮叮:

陈晨玲

这位小美女名叫陈晨玲,常用昵称是CC0,怎么样?是不是看上去很有心动的感觉。

(本篇完)

分享到:


发表评论(目前28 条评论)

  1. soar说道:

    其实现在使用 元素的 contentediteable=true,可以很方便实现这个,
    从window复制,找到一个网站可以实现类似的:slack.com
    博主可以看看是怎么做到的,我看不出来

  2. 不想当小白说道:

    请问博主可以发一下这个图片上传的后台php代码吗?刚学计算机不久,不太清楚后台应该如何处理,希望博主可以分享一下代码让我学习一下,十分感谢~

  3. haust_lyb说道:

    告诉你个秘密,苹果系统用你的demo(https://www.zhangxinxu.com/study/201809/ajax-upload-image-from-clipboard-by-paste.php)可以粘贴复制的图片文件的,Windows确实不能

  4. Beloved说道:

    你好,请问如何通过点击事件获取剪切板图片,同样是上传剪切板图片,页面是点击按钮直接获取剪切板图片然后上传。没有粘贴事件

  5. jungle说道:

    如果要复制本地文件怎么复制

  6. feng说道:

    windows上直接复制,可能复制的是 地址,剪贴板中并还没有真是的图片内容

  7. 加文说道:

    word里的图片复制,然后在粘贴到网页里面不知道能行不

  8. ppk说道:

    旭哥,为什么我上传的是jpg格式的,返回结果却是png的呢

  9. dd说道:

    旭旭好可爱

  10. wingmeng说道:

    直接上旭嫂的照片不就行了?

  11. tianfan说道:

    所以,要直接显示出来。还是要变成,base 64么。或者画进 canvas ?

  12. 削一说道:

    张老师我发现一个小问题:
    demo里面的上传进度‘正在上传,进度:’ + Math.round(100 * event.loaded / event.total) / 100 + ‘%’
    因为后面跟的符号是“%”所以就不需要除以100了,现在的上传完成的100%会显示为“1%”

  13. yzh说道:

    老师你真是个活宝

  14. 郭二蛋说道:

    旭叔,我就是来看你结束语的~

  15. 博主您好,请问交换友链吗?我的网站链接是过微信备案域名抢注:www.guoweixin.com,还想问一下广告赞助如何收费?

  16. 广建说道:

    你怎么知道她年纪偏大,哈哈哈

  17. 淘宝论坛说道:

    双击66666

  18. ghosthh说道:

    熟点挺好~

  19. 17biu说道:

    外拓一下,windows上不能直接ctrl c. ctrl v复制粘贴图片,必须是打开预览才能复制粘贴,mac可以.不知道有没有大神解决这个问题的

  20. wzv5说道:

    Windows桌面开发者路过,解释一下Windows复制图片。
    在文件管理器里选中一个文件,复制,相当于复制了一个文件的路径,剪切板里并没有文件数据。
    而博主在代码里明确写出了,需要的数据类型是image,什么时候会产生image类型的剪切板数据呢?可以是文中写出的,使用各种截图工具,也可以使用图像编辑器、查看器、甚至是用chrome打开本地图片文件,在里面进行复制。
    至于方便的工具,随便Google了一下现成的,nircmd可以办到,不过这是个命令行工具,想方便使用的话需要自己改注册表给右键菜单添加一个快捷命令。

    • 说道:

      QQ截图就是使用的临时文件,可惜谷歌浏览器不给访问本地,否则像啥搜狗输入法的表情包就能插入

    • 我是谁,我在哪说道:

      上传图片也是根据路径上传的,所以瓶颈不在于前端,如果能拿到路径,自然也就可以通过路径上传的方式上传;那么瓶颈大概就是浏览器不能获取到这个的复制内容吧?

    • hale说道:

      windows下如何取到复制的文件路径?

      • haust_lyb说道:

        不能获取,Windows上一般网页是无法主动获取系统文件的,从底层上就不能被支持了,不过苹果不一样,苹果的图片复制后剪贴板里面是图片,可以直接粘贴到浏览器中。

  21. lyq说道:

    赞!锦上添花的体验