在浏览器中使用截图工具截图后直接粘贴到页面上传,以及拖拽到页面标签区域上传
主要使用了粘贴(paste)事件,以及拖拽(drag)事件,其中拖拽时要禁用浏览器的默认将图片打开的行为
例子:
HTML部分:
截图后粘贴或拖拽到下框:
js部分:
1
调用:
后端保存图片部分代码:
[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