截图后粘贴或拖拽上传

在浏览器中使用截图工具截图后直接粘贴到页面上传，以及拖拽到页面标签区域上传

主要使用了粘贴（paste）事件，以及拖拽（drag）事件，其中拖拽时要禁用浏览器的默认将图片打开的行为

例子：

HTML部分：

    <div>
        截图后粘贴或拖拽到下框：
        <div id="upload" style="width: 800px; height: 600px; border: 1px solid red;">
        </div>
    </div>

js部分：

<script>
    (function (mod) {
        if (typeof exports == "object" && typeof module == "object") // CommonJS
            module.exports = mod();
        else if (typeof define == "function" && define.amd) // AMD
            return define([], mod);
        else // Plain browser env
            window.UploadImage = mod();
    })(function () {


        function UploadImage(id, url, key) {
            this.element = document.getElementById(id);
            this.url = url; //后端处理图片的路径
            this.imgKey = key || "AreaImgKey"; //提到到后端的name

        }
        //粘贴图片事件
        UploadImage.prototype.paste = function (callback, formData) {
            var thatthat = this;
            this.element.addEventListener('paste', function (e) {//处理目标容器（id）的paste事件

                if (e.clipboardData && e.clipboardData.items.length > 0 && e.clipboardData.items[0].type.indexOf('image') > -1) {
                    var that = this,
                    file = e.clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据

                    dataReader(file, function (e) { //reader读取完成后，xhr上传
                        var fd = formData || (new FormData());
                        fd.append(thatthat.imgKey, this.result); // this.result得到图片的base64

                        xhRequest('POST', thatthat.url, fd, callback, that);

                    });

                }
            }, false);

        };

        //拖拽事件
        UploadImage.prototype.drag = function (callback, formData) {
            var that = this;
            this.element.addEventListener('drop', function (e) {//处理目标容器（id）的drop事件
                e.preventDefault(); //取消默认浏览器拖拽效果
                var fileList = e.dataTransfer.files; //获取文件对象
                //检测是否是拖拽文件到页面的操作
                if (fileList.length == 0) {
                    return false;
                }
                //检测文件是不是图片
                if (fileList[0].type.indexOf('image') === -1) {
                    console.log && console.log("您拖的不是图片！");
                    return false;
                }
                var fd = formData || (new FormData());
                fd.append(that.imgKey, fileList[0]); //
                xhRequest('POST', that.url, fd, callback, this);

            }, false);
        };

        //上传
        UploadImage.prototype.upload = function (callback, formData) {
            this.drag(callback, formData);
            this.paste(callback, formData);
        };

        preventDragDefault();
        //private

        function xhRequest(method, url, formData, callback, callbackContext) {
            var xhr = new XMLHttpRequest();
            xhr.open(method, url, true);
            xhr.onload = function () {
                callback && callback.call(callbackContext || this, xhr);
            };
            xhr.send(formData || (new FormData()));

        }

        function preventDragDefault()//阻止浏览器默认将图片打开的行为
        {
            document.addEventListener("dragleave", preventDefault);//拖离
            document.addEventListener("drop", preventDefault);//拖后放
            document.addEventListener("dragenter", preventDefault);//拖进
            document.addEventListener("dragover", preventDefault);//拖来拖去
        }

        function preventDefault(e) {
            e.preventDefault();
        }

        function dataReader(file, callback) {
            var reader = new FileReader();
            reader.onload = callback;
            reader.readAsDataURL(file);//获取base64编码
        }
        return UploadImage;
    });

</script>

调用：

<script>
    new UploadImage("upload", "UploadImage").upload(function (xhr) {
        var img = new Image();
        img.src = xhr.responseText;
        this.appendChild(img);
    });

</script>

后端保存图片部分代码：

        [HttpPost]
        public ActionResult UploadImage()
        {
            if (!System.IO.Directory.Exists(Server.MapPath("upload")))
            {
                System.IO.Directory.CreateDirectory(Server.MapPath("upload"));
            }
            if (Request.Files.Count == 0)
            {
                string strData = Request["AreaImgKey"].ToString(); //粘贴上传，取的base64编码
                Bitmap img = Base64StringToImage(strData);
                string imgName = "/" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + ".jpg";
                if (img != null)
                {
                    img.Save(Server.MapPath("upload") + imgName, System.Drawing.Imaging.ImageFormat.Jpeg);
                    return Content("upload" + imgName);
                }
            }
            else   //拖拽上传可直接拿到文件
            {
                string imgName = "/" + DateTime.Now.ToString("yyyyMMddHHmmssfff") + Request.Files[0].FileName;
                Request.Files[0].SaveAs(Server.MapPath("upload") + imgName);
                return Content("upload" + imgName);
            }
            return Content("");
        }

        protected Bitmap Base64StringToImage(string strbase64)
        {
            try
            {
                byte[] arr = Convert.FromBase64String(strbase64.Split(',')[1]);
                MemoryStream ms = new MemoryStream(arr);
                Bitmap bmp = new Bitmap(ms);
                ms.Close();
                return bmp;
            }
            catch (Exception ex)
            {
                return null;
            }
        }

demo源码下载地址：链接：https://pan.baidu.com/s/1bMdl5saJruVy0d4DcFj6Bg 密码：iqui