前端页面实现聊天粘贴图片功能

项目需求：客服聊天系统需要可粘贴图片发送功能；

html页面：

设置一个可编辑的div

<div id="editor" class="texter" tabindex="0" contenteditable="true" οnpaste="return pasteListener(event, true)"></div>

jq代码:

function pasteListener(event, isLimit) {
　　$.each(event.clipboardData.items, function(index, item) {
　　　　if(item.kind == "file" && item.type.match("image/*")) {
　　　　　　var file = item.getAsFile();
　　　　　　if(isLimit && file.size > 2 * 1024 * 1024) {
　　　　　　　　parent.index.layers("msg", "粘贴的图片内容过大，最大支持为2M。");
　　　　　　　　return true;
　　　　　　}
　　　　　　var fileReader = new FileReader();
　　　　　　fileReader.onload = function(event) {
　　　　　　　　var img = "<img src='" + event.target.result + "' style='" + (isLimit ? "width:200px;" : "") + "'" + (isLimit ? "" : "") + ">";
　　　　　　　　var selection = window.getSelection();
　　　　　　　　var range = selection.getRangeAt(0);
　　　　　　　　range.insertNode($(img)[0]);
　　　　　　　　selection.anchorOffset = selection.focusOffset;
　　　　　　　　selection.collapseToEnd();
　　　　　　}
　　　　　　fileReader.readAsDataURL(file);
　　　　　} else if(item.kind == "string" && item.type.match("text/plain")) {
　　　　　　　　item.getAsString(function(str) {
　　　　　　　　　　var selection = window.getSelection();
　　　　　　　　　　var range = selection.getRangeAt(0);
　　　　　　　　　　range.insertNode(new Text(str));
　　　　　　　　　　selection.anchorOffset = selection.focusOffset;
　　　　　　　　　　selection.collapseToEnd();
　　　　　　　});
　　　　}
　　});
　　return false;
}

转载于:https://www.cnblogs.com/cyeldxlz/p/11207073.html