<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div
id="pasteImg"
style="width: 100%; height: 300px; border: dashed"
contenteditable="true"
></div>
<button style="width: 80px; height: 20px" id="btnGO">上传图片</button>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
window.onload = function () {
//聊天内容框 插入文本或者其他元素后，移动置光标到最新处
function insertHtmlAtCaret(childElement) {
var imgs = document.getElementById("pasteImg").children;
if (imgs.length > 3) {
alert("只支持上传4张图");
return false;
}
var sel, range;
if (window.getSelection) {
// IE9 and non-IE
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.appendChild(childElement);
var 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);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
IE < 9;
document.selection.createRange().pasteHTML(html);
}
}
//以下是拖拽事件
document.addEventListener(
"dragenter",
function (e) {
e.stopPropagation();
e.preventDefault();
},
false
);
document.addEventListener(
"dragleave",
function (e) {
e.stopPropagation();
e.preventDefault();
},
false
);
document.addEventListener(
"dragover",
function (e) {
e.stopPropagation();
e.preventDefault();
},
false
);
document.addEventListener(
"drop",
function (e) {
e.stopPropagation();
e.preventDefault();
handleFiles(e.dataTransfer.files);
},
false
);
//拖拽文件处理事件
handleFiles = function (files) {
alert("暂不支持拖拽上传，可直接复制本地图片粘贴");
};
function paste_img(e) {
if (e.clipboardData && e.clipboardData.items) {
var imageContent = e.clipboardData.getData("image/png");
ele = e.clipboardData.items;
for (var i = 0; i < ele.length; ++i) {
//粘贴图片
if (ele[i].kind == "file" && ele[i].type.indexOf("image/") !== -1) {
var blob = ele[i].getAsFile();
blobToDataURI(blob, function (result) {
var new_img = document.createElement("img");
new_img.setAttribute("src", result);
new_img.setAttribute("width", "100px");
new_img.setAttribute("height", "100px");
insertHtmlAtCaret(new_img);
});
} //粘贴文本
else if (
ele[i].kind === "string" &&
ele[i].type.indexOf("text/plain") != -1
) {
alert("只支持图片上传");
document.getElementById("pasteImg").innerText = "";
} else return;
}
} else {
alert("不支持的浏览器");
}
} //绑定粘贴事件
document.getElementById("pasteImg").onpaste = function () {
paste_img(event);
return false;
};
document.getElementById("btnGO").onclick = function () {
var imgs = document.getElementById("pasteImg").children;
for (let index = 0; index < imgs.length; index++) {
const element = imgs[index];
console.log(element.src);
}
};
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.onload = function (e) {
callback(e.target.result);
};
reader.readAsDataURL(blob);
}
};
</script>
<script></script>