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

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

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

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

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

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

可以直接运行的代码：

[html]view plain copy
<!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>  

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

猜你喜欢