给输入框的添加复制粘贴图片功能

给输入框添加复制粘贴功能，首先想到的就是富文本，但如果我们只要复制粘贴功能而不要其他的功能，而且输入框的内容需要提交呢？
首先我们需要使用到contenteditable属性：

<div contenteditable id='editale'></div>

然后监听这个输入框的粘贴事件：

$('#editable').on('paste',function(event){
		$(this).focus();
		let ev=event.originalEvent;
		let selection=window.getSelection();
		if(selection.getRangeAt && selection.rangeCount){
			let range=selection.getRangeAt(0);
			let imgReg=new RegExp(/image\/.*/);
			let fileList=$.map(ev.clipboardData.items,function(file){
				if( !imgReg.test(file.type))return;
				return file.getAsfile();
			 });
			 if(fileList.length<=0) return;
			 let file=fileList[0];
			 //上传图片到数据库获取图片路径
			 let formData=new FormData();
			 formData.append('file',file);
			 $.ajax({
				url:'xxxxxxx',
				type:'POST',
				cache:false,
				data:formData,
				contentType:false,
				processData:false,
				success:function(res){
					let el=document.createElement('div');
					el.innerHTML="<img src=' " +res.data+" ' />";
					let frag=document.createDocumentFragment(),node,lastNode;
					while(node==el.firstChild){
						lastNode=frag.appendChild(node);
					}
					range.insertNode(frag);
					if(lastNode){
						range=range.cloneRange();
						range.setStartAfter(lastNode);
						range.collapse(true);
						selection.removeAllRanges();
						selection.addRange(range);
					}
				},
				error:function(err){
					console.error('Upload Error',err);
				}
			})
		}
		//阻止粘贴图片直接显示出来
		ev.preventDefault();
	})