截圖後粘貼或拖拽上傳

在瀏覽器中使用截圖工具截圖後直接粘貼到頁面上傳，以及拖拽到頁面標籤區域上傳

主要使用了粘貼（paste）事件，以及拖拽（drag）事件，其中拖拽時要禁用瀏覽器的默認將圖片打開的行爲

例子：

HTML部分：

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

js部分：

  1 <script>
  2     (function (mod) {
  3         if (typeof exports == "object" && typeof module == "object") // CommonJS
  4             module.exports = mod();
  5         else if (typeof define == "function" && define.amd) // AMD
  6             return define([], mod);
  7         else // Plain browser env
  8             window.UploadImage = mod();
  9     })(function () {
 10 
 11 
 12         function UploadImage(id, url, key) {
 13             this.element = document.getElementById(id);
 14             this.url = url; //後端處理圖片的路徑
 15             this.imgKey = key || "AreaImgKey"; //提到到後端的name
 16 
 17         }
 18         //粘貼圖片事件
 19         UploadImage.prototype.paste = function (callback, formData) {
 20             var thatthat = this;
 21             this.element.addEventListener('paste', function (e) {//處理目標容器（id）的paste事件
 22 
 23                 if (e.clipboardData && e.clipboardData.items.length > 0 && e.clipboardData.items[0].type.indexOf('image') > -1) {
 24                     var that = this,
 25                     file = e.clipboardData.items[0].getAsFile();//讀取e.clipboardData中的數據
 26 
 27                     dataReader(file, function (e) { //reader讀取完成後，xhr上傳
 28                         var fd = formData || (new FormData());
 29                         fd.append(thatthat.imgKey, this.result); // this.result獲得圖片的base64
 30 
 31                         xhRequest('POST', thatthat.url, fd, callback, that);
 32 
 33                     });
 34 
 35                 }
 36             }, false);
 37 
 38         };
 39 
 40         //拖拽事件
 41         UploadImage.prototype.drag = function (callback, formData) {
 42             var that = this;
 43             this.element.addEventListener('drop', function (e) {//處理目標容器（id）的drop事件
 44                 e.preventDefault(); //取消默認瀏覽器拖拽效果
 45                 var fileList = e.dataTransfer.files; //獲取文件對象
 46                 //檢測是不是拖拽文件到頁面的操做
 47                 if (fileList.length == 0) {
 48                     return false;
 49                 }
 50                 //檢測文件是否是圖片
 51                 if (fileList[0].type.indexOf('image') === -1) {
 52                     console.log && console.log("您拖的不是圖片！");
 53                     return false;
 54                 }
 55                 var fd = formData || (new FormData());
 56                 fd.append(that.imgKey, fileList[0]); //
 57                 xhRequest('POST', that.url, fd, callback, this);
 58 
 59             }, false);
 60         };
 61 
 62         //上傳
 63         UploadImage.prototype.upload = function (callback, formData) {
 64             this.drag(callback, formData);
 65             this.paste(callback, formData);
 66         };
 67 
 68         preventDragDefault();
 69         //private
 70 
 71         function xhRequest(method, url, formData, callback, callbackContext) {
 72             var xhr = new XMLHttpRequest();
 73             xhr.open(method, url, true);
 74             xhr.onload = function () {
 75                 callback && callback.call(callbackContext || this, xhr);
 76             };
 77             xhr.send(formData || (new FormData()));
 78 
 79         }
 80 
 81         function preventDragDefault()//阻止瀏覽器默認將圖片打開的行爲
 82         {
 83             document.addEventListener("dragleave", preventDefault);//拖離
 84             document.addEventListener("drop", preventDefault);//拖後放
 85             document.addEventListener("dragenter", preventDefault);//拖進
 86             document.addEventListener("dragover", preventDefault);//拖來拖去
 87         }
 88 
 89         function preventDefault(e) {
 90             e.preventDefault();
 91         }
 92 
 93         function dataReader(file, callback) {
 94             var reader = new FileReader();
 95             reader.onload = callback;
 96             reader.readAsDataURL(file);//獲取base64編碼
 97         }
 98         return UploadImage;
 99     });
100 
101 </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