JavaScript实现黏贴上传图片功能

这周工作中，遇到了一个文章编辑的功能需求，需要支持图片黏贴上传并预览，但是使用我们公司自己封装的富文本编辑器，发现居然没有黏贴上传图片的功能，额。。。心想，公司真是该有的功能没有，不该有的功能一大堆。。。没办法，只能百度自己实现如何实现黏贴上传图片功能。

（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")// 添加监听事件pastecontent.addEventListener('paste', function (e){// 具体操作});
</script>

（3）从clipboardData中获取黏贴板数据

监听paste事件，方法参数中的e里面有个clipboardData属性，该属性中包含了黏贴板数据，可以是字符串文本，也可以是图片文件。

<script>var content = document.getElemmentById("content")// 添加监听事件pastecontent.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")// 添加监听事件pastecontent.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实现图片黏贴上传并且预览的功能。

JavaScript实现黏贴上传图片功能相关推荐

怎样实现前端裁剪上传图片功能
怎样实现前端裁剪上传图片功能由于前端是不能直接操作本地文件的,要么通过<input type="file">用户点击选择文件或者拖拽的方式,要么使用flash等第三方 ...
ckeditor php 上传图片_ckeditor 4上传图片功能配置方法
ckeditor 4上传图片功能配置方法发布于 2015-01-04 10:04:08 | 2375 次阅读 | 评论: 2 | 来源: PHPERZ CKEditor网页编辑器CKEditor 即 ...
php web裁剪图片上传,WEB前端实现裁剪上传图片功能
最后的效果如下: 这里面有几个功能,第一个是支持拖拽,第二个压缩,第三个是裁剪编辑,第四个是上传和上传进度显示,下面依次介绍每个功能的实现: 1. 拖拽显示图片拖拽读取的功能主要是要兼听html5的 ...
ckeditor3.0.1上传图片功能(.net版本)
ckeditor3.0.1上传图片功能 ckeditro中本身没有带上传功能,那就要用到组件 Ckfinder 下载地址 http://ckfinder.com/ 别下错了是.net版本的配置就简 ...
wcf 返回图片_WCF实现上传图片功能
初次学习实现WCF winform程序的通信,主要功能是实现图片的传输. 下面是实现步骤: 第一步: 首先建立一个类库项目TransferPicLib,导入wcf需要的引用System.Service ...
用javascript实现自我执行功能的目的是什么？
在javascript中,什么时候要使用它: (function(){//Bunch of code... })(); 在此: //Bunch of code... #1楼我简直不敢相信答案中没有提 ...
图片上传组件_配置Django-TinyMCE组件实现上传图片功能
Django自带的Admin后台,好用,TinyMCE作为富文本编辑器,也蛮好用的,这两者结合起来在做博客的时候很方便(当然博客可能更适合用Markdown来写),但是Django-TinyMCE这个 ...
让我们了解Set及其在JavaScript中的独特功能
by Asif Norzai 通过Asif Norzai 让我们了解Set及其在JavaScript中的独特功能
ionic html5 上传图片,ionic4+angular7+cordova上传图片功能的实例代码
前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不 ...
java ajax传输图片_Java使用Ajax实现跨域上传图片功能
说明 : 图片服务器是用Nginx搭建的,用的是PHP语言这个功能需要用到两个js文件: jquery.js和jQuery.form.js function submitImgSize1Uplo ...