这周工作中，遇到了一个文章编辑的功能需求，需要支持图片黏贴上传并预览，但是使用我们公司自己封装的富文本编辑器，发现居然没有黏贴上传图片的功能，额。。。心想，公司真是该有的功能没有，不该有的功能一大堆。。。没办法，只能百度自己实现如何实现黏贴上传图片功能。
（1）html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title>
<style>
#content {
margin:0 auto;
width:600px;
height:600px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div id="content" contenteditable="true">
</div>
</body>
</html>（2）添加监听事件
监听黏贴操作，即：ctrl+v的动作，js里面是paste事件。
<script>
var content = document.getElemmentById("content")
// 添加监听事件paste
content.addEventListener('paste', function (e){
// 具体操作
});
</script>（3）从clipboardData中获取黏贴板数据
监听paste事件，方法参数中的e里面有个clipboardData属性，该属性中包含了黏贴板数据，可以是字符串文本，也可以是图片文件。
<script>
var content = document.getElemmentById("content")
// 添加监听事件paste
content.addEventListener('paste', function (e){
// 黏贴版没有数据,则直接结束
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// 黏贴版数据项,是个数组
var data = e.clipboardData.items;
if (data && data.length) {
// TODO 具体操作
}
e.preventDefault();
});
</script>（4）判断是文本还是图片文件
if (data && data.length) {
var item = data[0];
// 判断是文本还是图片文件
if (item.kind == 'string') {
// 获取文本内容
var text = event.clipboardData.getData('Text');
// 设置到content中
content.innerHTML = text;
} else if (item.kind == 'file') {
// 获取文件
var file = item.getAsFile();
// 图片插入div中
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
var img = document.createElement("img");
img.src = event.target.result;
content.appendChild(img);
}
}
}（5）完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片黏贴上传</title>
<style>
#content {
margin:0 auto;
width:600px;
height:600px;
border:1px solid black;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div id="content" contenteditable="true">
</div>
<script>
var content = document.getElemmentById("content")
// 添加监听事件paste
content.addEventListener('paste', function (e){
// 黏贴版没有数据,则直接结束
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// 黏贴版数据项,是个数组
var data = e.clipboardData.items;
if (data && data.length) {
var item = data[0];
// 判断是文本还是图片文件
if (item.kind == 'string') {
// 获取文本内容
var text = event.clipboardData.getData('Text');
// 设置到content中
content.innerHTML = text;
} else if (item.kind == 'file') {
// 获取文件
var file = item.getAsFile();
// 图片插入div中
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (event) {
var img = document.createElement("img");
img.src = event.target.result;
content.appendChild(img);
}
}
}
e.preventDefault();
});
</script>
</body>
</html>（6）效果演示
以上就是使用JavaScript实现图片黏贴上传并且预览的功能。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/134780.html
