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

叁歲伎倆 2022-03-12 14:26 449阅读 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>

转自https://blog.csdn.net/miss\_liang/article/details/72864917