如果浏览器支持HTML5，通过past事件就可以获取图片的base64位字符，这样就可以实现图片的粘贴上传。
前端：
<div id="imgDiv" style="border: 1px solid darkblue">
CTRL+V即可实现粘贴
</div>
<script type="text/javascript">
function doPaste() {
pasterTool.paste();
}
var Config = {
Paths: {},
isMac: false,
Resources: null
};
Config.Resources = {
makeImage: ‘/Home/PasteImage‘,
};
var State = {
isPasting: false,
pasterAdded: false,
pasterReady: false,
pasteComplete: false,
pasteId: 0
};
var pasteCount = 0;
function isUrl(a) {
var b = /(ftp|http|https):\/\/(\w+:{0,1}\w*@@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@@!\-\/]))?/;
return b.test(a);
};
var pasterTool = {
data: "",
mode: 0,
processAsHtml: function (b) {
var a = b.clipboardData.getData("text/html");
if (a) {
$("#pasteCapture").html(a);
if ($("#pasteCapture img").length) {
pasterTool.data = $("#pasteCapture img:first").attr("src");
pasterTool.mode = 2;
pasterTool.process();
return true;
} else {
if ($("#pasteCapture a").length) {
pasterTool.data = $("#pasteCapture a:first").attr("href");
pasterTool.mode = 2;
pasterTool.process();
return true;
}
}
}
return false;
},
processAsText: function (b) {
var a = b.clipboardData.getData("text/plain");
if (a) {
if (isUrl(a)) {
pasterTool.data = a;
pasterTool.mode = 2;
pasterTool.process();
return true;
}
}
return false;
},
checkEditableArea: function () {
$("#pasteCapture").html("");
(function() {
var e = null;
var c = 50;
var d = 500;
var b = function() {
clearInterval(e);
$("#pasteCapture").attr("contenteditable", false);
$("#pasteCapture").blur();
$("#pasteCapture").attr("contenteditable", true);
};
var a = function() {
if ($("#pasteCapture").html().length > 0) {
b();
if ($("#pasteCapture img").length) {
var h = $("#pasteCapture img:first").attr("src");
var g = "data";
var f = "file";
var i = "webkit-fake-url";
if (h.substring(0, g.length) === g) {
pasterTool.data = h.substr(h.indexOf(",") + 1);
pasterTool.mode = 1;
pasterTool.process();
} else {
if (h.substring(0, f.length) === f) {
State.isPasting = false;
} else {
if (h.substring(0, i.length) === i) {
State.isPasting = false;
} else {
pasterTool.data = h;
pasterTool.mode = 2;
pasterTool.process();
}
}
}
} else {
if (isUrl($("#pasteCapture").html())) {
pasterTool.data = $("#pasteCapture").html();
pasterTool.mode = 2;
pasterTool.process();
} else {
State.isPasting = false;
}
}
} else {
d -= c;
if (d <= 0) {
b();
State.isPasting = false;
}
}
};
e = setInterval(a, c);
})();
},
paste: function (d) {
pasteCount--;
if (State.isPasting) {
return;
}
State.isPasting = true;
d = d.originalEvent;
if (d&&d.clipboardData) {
if (d.clipboardData.items) {
if (d.clipboardData.items.length == 0) {
State.isPasting = false;
return;
}
for (var b = 0; b < d.clipboardData.items.length; b++) {
var c = d.clipboardData.items[b];
if (c.type == "image/png") {
pasterTool.mode = 1;
var a = new FileReader();
a.onloadend = function () {
pasterTool.data = this.result.substr(this.result.indexOf(",") + 1);
pasterTool.process();
};
a.readAsDataURL(c.getAsFile());
break;
} else {
if (c.type == "text/html") {
if (pasterTool.processAsHtml(d)) {
State.isPasting = false;
break;
} else {
State.isPasting = false;
}
} else {
if (c.type == "text/plain") {
if (pasterTool.processAsText(d)) {
State.isPasting = false;
break;
} else {
State.isPasting = false;
}
} else {
State.isPasting = false;
}
}
}
}
} else {
if (!(pasterTool.processAsHtml(d) || pasterTool.processAsText(d))) {
pasterTool.checkEditableArea();
}
}
} else {
pasterTool.checkEditableArea();
}
},
process: function () {
State.isPasting = true;
var a = Config.Resources.makeImage;
$.post(a, pasterTool.data,
function(b) {
State.isPasting = false;
onPasteComplete(b);
});
}
};
function onPasteComplete(data) {
var dat = data;
$("#imgDiv").append("<input type=‘image‘ src=‘"+data+"‘/>");
}
function focusPasteArea() {
$("#pasteCapture").focus();
}
$(document).ready(function () {
$("<div/>").attr({
"id": "pasteCapture",
"contenteditable": "true",
"_moz_resizing": "false"
}).css({
"position": "absolute",
"height": "1",
"width": "0",
"top": "-9999",
"left": "-9999",
"outline": "0",
"overflow": "auto",
"opacity": "0",
"z-index": "-9999"
}).prependTo("body");
$("body").bind("paste", pasterTool.paste);
focusPasteArea();
$(document).bind("keydown", "ctrl+v", focusPasteArea);
});
</script>
后台：
[HttpPost]
public ActionResult PasteImage(HttpPostedFileBase upload)
{
var fileName = DateTime.Now.ToString("yyyyMMddHHmmss") + ".png";
var filePhysicalPath = Server.MapPath("~/upload/" + fileName);//我把它保存在网站根目录的 upload 文件夹
var data1 = Request.Form.ToString();
var data = data1.Replace("%2f", "/").Replace("%3d", "=");
byte[] bytes1 = Convert.FromBase64String(data);
MemoryStream memStream1 = new MemoryStream(bytes1);
Image a = new Bitmap(memStream1);
a.Save(filePhysicalPath);
var url = "/upload/" + fileName;
return Content(url);
}
因为浏览器会自动将=号转换为‘%2f‘,所以后台要多作一层转换
var data = data1.Replace("%2f", "/").Replace("%3d", "=");
代码下载：Blogtest.zip
时间： 2024-08-30 06:25:12