首页 > 代码库 > 图片的粘贴上传
图片的粘贴上传
如果浏览器支持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=http://www.mamicode.com/‘"+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 = http://www.mamicode.com/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 = http://www.mamicode.com/data1.Replace("%2f", "/").Replace("%3d", "=");
代码下载：Blogtest.zip
图片的粘贴上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。