这篇文章发布于 2018年09月21日,星期五,00:15,归类于 JS实例。 阅读 65297 次, 今日 57 次 29 条评论
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8016
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
一、趁热打铁
上一篇文章也和剪切板粘贴相关,主要讲的是输入框粘贴内容的体验优化,本文趁热打铁,继续介绍和剪切板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,怎么样?是不是看上去很有心动的感觉。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:https://www.zhangxinxu.com/wordpress/?p=8016
(本篇完)
- 又get到了,JS复制图片到剪切板 (0.418)
- 利用剪切板JS API优化输入框的粘贴体验 (0.413)
- JS复制文字到剪切板的极简实现及扩展 (0.413)
- 拖拽献祭中的黑山羊-DataTransfer对象 (0.318)
- HTML input type=file文件选择表单元素二三事 (0.212)
- 基于HTML5的可预览多图片Ajax上传 (0.206)
- HTML5 file API加canvas实现图片前端JS压缩并上传 (0.164)
- js+flash(as3)实现复制文字内容到剪切板 (0.159)
- Ajax Upload多文件上传插件翻译及中文演示 (0.148)
- 学习了,CSS中内联SVG图片有比Base64更好的形式 (0.127)
- 使用jsPDF导出PDF文件实践分享 (RANDOM - 0.058)
其实现在使用 元素的 contentediteable=true,可以很方便实现这个,
从window复制,找到一个网站可以实现类似的:slack.com
博主可以看看是怎么做到的,我看不出来
请问博主可以发一下这个图片上传的后台php代码吗?刚学计算机不久,不太清楚后台应该如何处理,希望博主可以分享一下代码让我学习一下,十分感谢~
用file_get_contents(‘php://input’)无法获取数据了, 要用$_FILES
告诉你个秘密,苹果系统用你的demo(https://www.zhangxinxu.com/study/201809/ajax-upload-image-from-clipboard-by-paste.php)可以粘贴复制的图片文件的,Windows确实不能
你好,请问如何通过点击事件获取剪切板图片,同样是上传剪切板图片,页面是点击按钮直接获取剪切板图片然后上传。没有粘贴事件
如果要复制本地文件怎么复制
windows上直接复制,可能复制的是 地址,剪贴板中并还没有真是的图片内容
word里的图片复制,然后在粘贴到网页里面不知道能行不
旭哥,为什么我上传的是jpg格式的,返回结果却是png的呢
同问~请问层主问题解决了吗
旭旭好可爱
直接上旭嫂的照片不就行了?
所以,要直接显示出来。还是要变成,base 64么。或者画进 canvas ?
张老师我发现一个小问题:
demo里面的上传进度‘正在上传,进度:’ + Math.round(100 * event.loaded / event.total) / 100 + ‘%’
因为后面跟的符号是“%”所以就不需要除以100了,现在的上传完成的100%会显示为“1%”
老师你真是个活宝
旭叔,我就是来看你结束语的~
博主您好,请问交换友链吗?我的网站链接是过微信备案域名抢注:www.guoweixin.com,还想问一下广告赞助如何收费?
不交换。广告赞助事宜可以加我助理QQ 2478466830
你怎么知道她年纪偏大,哈哈哈
陈晨玲, 就没有版权问题啦?
双击66666
熟点挺好~
外拓一下,windows上不能直接ctrl c. ctrl v复制粘贴图片,必须是打开预览才能复制粘贴,mac可以.不知道有没有大神解决这个问题的
Windows桌面开发者路过,解释一下Windows复制图片。
在文件管理器里选中一个文件,复制,相当于复制了一个文件的路径,剪切板里并没有文件数据。
而博主在代码里明确写出了,需要的数据类型是image,什么时候会产生image类型的剪切板数据呢?可以是文中写出的,使用各种截图工具,也可以使用图像编辑器、查看器、甚至是用chrome打开本地图片文件,在里面进行复制。
至于方便的工具,随便Google了一下现成的,nircmd可以办到,不过这是个命令行工具,想方便使用的话需要自己改注册表给右键菜单添加一个快捷命令。
QQ截图就是使用的临时文件,可惜谷歌浏览器不给访问本地,否则像啥搜狗输入法的表情包就能插入
上传图片也是根据路径上传的,所以瓶颈不在于前端,如果能拿到路径,自然也就可以通过路径上传的方式上传;那么瓶颈大概就是浏览器不能获取到这个的复制内容吧?
windows下如何取到复制的文件路径?
不能获取,Windows上一般网页是无法主动获取系统文件的,从底层上就不能被支持了,不过苹果不一样,苹果的图片复制后剪贴板里面是图片,可以直接粘贴到浏览器中。
赞!锦上添花的体验