图片的粘贴上传

如果浏览器支持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