前端js实现粘贴图片到可编辑的div(其他标签也可)中

最新推荐文章于 2024-06-28 14:43:22 发布

Miss_Liang

最新推荐文章于 2024-06-28 14:43:22 发布

阅读量9.2k

点赞数 8

分类专栏：前端 js 文章标签： html javascript 前端

本文链接：https://blog.csdn.net/Miss_Liang/article/details/72864917

版权

前端同时被 2 个专栏收录

25 篇文章 1 订阅

订阅专栏

18 篇文章 0 订阅

订阅专栏

输入框中要实现粘贴图片功能，不能用input、textarea等输入框作为父容器，因为input、textarea中只能接受字符串，对于html标签不进行转义以及渲染。

所以用contenteditable='true'属性来使div(其他容器也可)实现可编辑，来模拟输入框，实现粘贴图片至输入框中的效果，提交数据给后端的时候可以用form提交，

也可用异步提交，form提交的时候将div中的数据全部放入form表单中的隐藏域即可，异步提交将div中的数据当做data传送即可。

js实现粘贴图片至可编辑的div中注意点：

粘贴的图片来源只能是QQ、微信、钉钉等聊天工具中产生的图片。（比如聊天记录中的图片、输入框中的截图、复制桌面上的图至输入框）

可以直接运行的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body,html{
				text-align: center;
			}
			#editDiv{
				width:1000px;
				display: inline-block;
				height: 800px;
				background:#fff;
				border-radius:10px;
				line-height: 20px;
				padding:10px;
				font-size: 14px;
				color:#666;
				resize: none;
				outline: none;
				overflow-y: scroll;
			}
			#editDiv{
				border:1px solid #333;
				border-color:rgba(169,169,169,1);
				text-align: left;
			}
		</style>
	</head>
	<body>
		<div id="editDiv" contenteditable="true">
		</div>
	</body>
	<script src="js/jquery.min.js"></script>	
	<script>
	document.querySelector('#editDiv').addEventListener('paste',function(e){
	 var cbd = e.clipboardData;
	    var ua = window.navigator.userAgent;
	    // 如果是 Safari 直接 return
	    if ( !(e.clipboardData && e.clipboardData.items) ) {
	        return ;
	    }
	    // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
	    if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
	        cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
	        ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
	        return;
	    }
	    for(var i = 0; i < cbd.items.length; i++) {
	        var item = cbd.items[i];
	        if(item.kind == "file"){
	            var blob = item.getAsFile();
	            if (blob.size === 0) {
	                return;
	            }
	            // blob 就是从剪切板获得的文件 可以进行上传或其他操作
	            /*-----------------------与后台进行交互 start-----------------------*/
				/*var data = new FormData();
				data.append('discoverPics', blob);
				$.ajax({
				    url: '/discover/addDiscoverPicjson.htm',
				    type: 'POST',
				    cache: false,
				    data: data,
				    processData: false,
				    contentType: false,
				    success:function(res){
				    	var obj = JSON.parse(res);
				    	var wrap = $('#editDiv');
					    var file = obj.data.toString();
					    var img = document.createElement("img");
				        img.src = file;
						wrap.appendChild(img);
				    },error:function(){
				    	
				    }
				})*/
				/*-----------------------与后台进行交互 end-----------------------*/
				/*-----------------------不与后台进行交互 直接预览start-----------------------*/
				var reader = new FileReader();
				var imgs = new Image(); 
				imgs.file = blob;
				reader.onload = (function(aImg) {
			      return function(e) {
			        aImg.src = e.target.result;
			      };
			    })(imgs);
			    reader.readAsDataURL(blob);
			    document.querySelector('#editDiv').appendChild(imgs);
			    /*-----------------------不与后台进行交互 直接预览end-----------------------*/
	        }
	    }
	}, false);
	</script>
</html>

Miss_Liang

关注

8
点赞
踩
13

收藏

觉得还不错? 一键收藏
9
评论
前端js实现粘贴图片到可编辑的div(其他标签也可)中

前端js实现粘贴图片到可编辑的div中去，实现原理是监听div容器的paste事件，对事件中粘贴过来的数据进行分析，若是图片则使用formdata将图片转换成二进制流，使用ajax传给后端，后端将图片存到服务器并返回一个图片在服务器中的地址，在ajax的success事件中动态创建img标签，将返回的地址赋值给img标签，并将标签添加至div标签中即可实现粘贴图片至可编辑的div中去。
复制链接

扫一扫

专栏目录