输入框中要实现粘贴图片功能,不能用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>