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

  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;}}