[转][Chrome]浏览器粘贴行为
2024-10-01 22:44:37
<html>
<head>
<meta charset="UTF-8">
<title>test chrome paste image</title>
<!-- https://www.zhihu.com/question/20893119/answer/19452676 -->
<style>
DIV#editable {
width: 400px;
height: 300px;
border: 1px dashed blue;
}
</style>
<script type="text/javascript">
window.onload=function() {
function paste_img(e) {
if ( e.clipboardData.items ) {
// google-chrome
//alert('support clipboardData.items(chrome ...)');
var ele = e.clipboardData.items
for (var i = 0; i < ele.length; ++i) {
if(ele[i].kind == 'string' && ele[i].type == 'text/plain') {
ele[i].getAsString(function(text){
console.log(text)
})
}
else if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
var blob = ele[i].getAsFile();
window.URL = window.URL || window.webkitURL;
var blobUrl = window.URL.createObjectURL(blob);
console.log(blobUrl); var new_img= document.createElement('img');
new_img.setAttribute('src', blobUrl);
var new_img_intro = document.createElement('p');
new_img_intro.innerHTML = 'the pasted img url(open it in new tab): <br /><a target="_blank" href="' + blobUrl + '">' + blobUrl + '</a>'; document.getElementById('editable').appendChild(new_img);
document.getElementById('editable').appendChild(new_img_intro);
}
}
} else {
alert('non-chrome');
}
}
document.getElementById('editable').onpaste=function(){paste_img(event);return false;};
} </script>
</head>
<body >
<h2>test image paste in browser</h2>
<div id="non-editable" >
<p>copy the following img, then paste it into the area below</p>
<!--<img src="./128.png" />-->
</div>
<div id="editable" contenteditable="true" >
<p>this is an editable div area</p>
<p>paste the image into here.</p>
</div>
</body>
</html>
本文来自:https://www.zhihu.com/question/20893119/answer/19452676
经测试,仅支持 Chrome 浏览器,可支持 文字、图片、Excel 粘贴。
最新文章
- Lightmaping
- Caliburn.Micro学习笔记(三)----事件聚合IEventAggregator和 Ihandle<;T>;
- 敏捷项目开源管理软件ScrumBasic(1)
- git 删除untracked 文件(转载)
- 安装mysql步骤
- NRF51822之GPIOTE使用
- POJ 3422 Kaka&#39;s Matrix Travels 【最小费用最大流】
- poj 3268 Silver Cow Party(最短路,正反两次,这个模版好)
- XML学习笔记(2)--dom4j操作XML
- 玩转nodeJS系列:使用原生API实现简单灵活高效的路由功能(支持nodeJs单机集群),nodeJS本就应该这样轻快
- IOS 应用发布流程
- java-Collection集合、List集合、Vector集合和迭代器Iterator、ListIterator的使用
- Eclipse创建Dynamic Web部署
- centos7 sentry部署指南
- 深入浅出!从语义角度分析隐藏在Unity协程背后的原理
- Tomcat介绍 安装jdk 安装Tomcat
- 【HTML5】初识HTML5
- 互评Beta版本 - Hello World团队项目空天猎
- SQL数据是否存在(是否有数据)判断,表,存储过程是否存在
- Two Seals codeforces 837c