昨天写了一篇如何实现类似Steemit界面中的图片粘贴上传功能的文章，但就像 
今天把程序简化了一下，另外改成了在Web服务器上更大众的PHP实现了一下。需要注意的是你的浏览器需要支持HTML5才行。我在最新版本的Chrome和Firefox都测试了，没有问题。
image from: pixabay.com
先来看看程序的界面
复制图片后，单击文本框后再按下"Ctrl + V"，可以看到如下界面：
至此，基本功能实现了。
下面来看下代码。首先保存如下代码到你虚拟主机的根目录下，命名为: 1.html
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
document.getElementById("pasteDiv").addEventListener("paste", pasteHandler);
};
function pasteHandler(e) {
var filename = Math.floor((1 + Math.random()) * 0x10000).toString(16)+".png";
var items = e.clipboardData.items;
for (var i = 0 ; i < items.length ; i++) {
var item = items[i];
if (item.type.indexOf("image") >=0) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (xhr.status == 200) {
console.log("uploaded.");
var imgdiv = document.getElementById("imgbox");
imgdiv.innerHTML = imgdiv.innerHTML + "<img src=\"/uploads/" + filename + "\"/>
";
var pastediv = document.getElementById("pasteDiv");
pastediv.value = pastediv.value + "![](/uploads/"+filename+")";
} else {
console.log("oops, something wrong.")
}
};
xhr.onerror = function() {
console.log("cannot connect to server.");
};
xhr.open("POST", "upload.php?filename="+filename, true);
xhr.setRequestHeader("Content-Type", item.getAsFile().type);
xhr.send(item.getAsFile());
} else {
console.log("Ignoring non-image.");
}
}
}
</script>
</head>
<body>
请复制图片后，单击下面的文本框，然后按下"Ctrl + V"<br/>
<textarea rows="10" cols="100" id="pasteDiv"></textarea>
<div id="imgbox">
</div>
</body>
</html>
再保存如下文件为: upload.php
<?php
define('ROOTPATH', __DIR__);
file_put_contents(ROOTPATH.'/uploads/'.$_GET["filename"], file_get_contents('php://input'));
?>
接下来，就可以访问：http://你的主机名/1.html，试试看。
https://steemit.com 首发。非常感谢阅读，欢迎FOLLOW, Resteem和Upvote 