你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET MVC 网站开发总结(三) ——图片截图上传


本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载)。

 

前台页面:

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <link rel="stylesheet" href="css/imgareaselect-default.css" /></head><body style="text-align:center;margin-top:200px;">  <img id="preview_img" class="update-pic" src="img/default.jpg" />  <form action="/User/UpdatePic" method="post" enctype="multipart/form-data" onsubmit="return Checkform()">    <input type="hidden" id="x1" name="x1" value="0" />    <input type="hidden" id="y1" name="y1" value="0" />    <input type="hidden" id="x2" name="x2" value="0" />    <input type="hidden" id="y2" name="y2" value="0" />    <input type="file" name="pictureFile" id="pictureFile" style="display:none;" value="" onchange="SelectPicture();" />    <div class="form-group text-center">      <button type="button" class="templatemo-white-button" onclick="document.getElementById('pictureFile').click();">选择</button>      <button type="submit" class="templatemo-blue-button">提交</button>    </div>  </form>  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>  <script type="text/javascript" src="js/jquery.imgareaselect.pack.js"></script>  <script type="text/javascript">    var img = new Image();    var imgWidth = 0;    var imgHeight = 0;        InitPicture();//初始化图片        function Checkform()    {      //检查是否合法      //...      return false;    }    //选择和设置图片    function SelectPicture() {      var pic = document.getElementById("pictureFile");      if (pic.value == "") {        return false;      }      //筛选图片      var strs = pic.value.split(".");      var fileExt = strs[strs.length - 1].toLowerCase();      if (fileExt != "jpg" && fileExt != "png") {        alert("错误提示:选择的文件格式不正确!");        return false;      }      //设置图片      var url = getFileUrl("pictureFile");      document.getElementById("preview_img").src = url;      img.src = url;      img.onload = function () {        if (this.width > this.height) {          imgWidth = 280;          imgHeight = parseInt(280 * (this.height / this.width));          document.getElementById("preview_img").style.width = "280px";          document.getElementById("preview_img").style.height = imgHeight + "px";        }        else {          imgHeight = 280;          imgWidth = parseInt(280 * (this.width / this.height));          document.getElementById("preview_img").style.height = "280px";          document.getElementById("preview_img").style.width = imgWidth + "px";        }        InitPicture();      };    }    //初始化图片    function InitPicture() {      $('#preview_img').imgAreaSelect({        minWidth: 50,//最小宽度        minHeight: 50,//最小高度        aspectRatio: '1:1',//宽高之比1:1        onSelectEnd: function (img, selection) {          $('input[name="x1"]').val(selection.x1);//绑定选中的值          $('input[name="y1"]').val(selection.y1);          $('input[name="x2"]').val(selection.x2);          $('input[name="y2"]').val(selection.y2);        }      });    }    //获取本地图片的url    function getFileUrl(sourceId) {      var url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));      if (navigator.userAgent.indexOf("MSIE") >= 1) { // IE        url = document.getElementById(sourceId).value;      } else if (navigator.userAgent.indexOf("Firefox") > 0) { // Firefox        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));      } else if (navigator.userAgent.indexOf("Chrome") > 0) { // Chrome        url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0));      }      return url;    }  </script></body></html>

View Code

要使用imgareaselect插件上传文件主要要引入了imgareaselect-default.css、jquery.imgareaselect.pack.js以及jquery-2.1.1.min.js三个文件。

图片呈现在页面上进行了等比例的放缩(长或宽放缩为280px)。

 

页面效果图:

后台处理代码:

 //更新用户头像    [HttpPost]    public ActionResult UpdatePicture(int x1, int y1, int x2, int y2, HttpPostedFileBase pictureFile)    {      if (pictureFile != null && pictureFile.ContentLength > 0)      {        if (pictureFile.ContentLength > 5242880)        {          return Content("<script>alert('错误提示:文件大小超出指定范围!');</script>");        }        string fileName = pictureFile.FileName.Split('\\').Last();        string fileExt = fileName.Substring(fileName.LastIndexOf('.')).ToLower();        if (fileExt == ".jpg" || fileExt == ".png")        {          string path = Server.MapPath("~/Resources/HeadPicture");          if (!Directory.Exists(path))          {            Directory.CreateDirectory(path);          }          fileName = DateTime.Now.ToFileTime().ToString() + Guid.NewGuid().ToString("N") + fileExt;          var picPath = Path.Combine(path, fileName);          pictureFile.SaveAs(picPath);//从客户端保存文件到本地          //检查裁剪图片是否合法并裁剪图片          var image = new WebImage(picPath);          double height = image.Height;          double width = image.Width;          if (width > height)          {            height = (int)(280 * (height / width));            width = 280;          }          else          {            width = (int)(280 * (width / height));            height = 280;          }          image.Resize((int)width, (int)height);//调整图片大小          var length = x2 - x1;          if (x1 >= 0 && x1 <= 280 && y1 >= 0 && y1 <= 280 && length >= 50 && length <= 280 && x1 + length <= width && y1 + length <= height)          {            image.Crop(y1, x1, (int)(height - y1 - length), (int)(width - x1 - length));            image.Save(picPath);            var logined = entity.Users.Find(Convert.ToInt32(User.Identity.Name));            logined.Picture = fileName;            entity.SaveChanges();            return Content("<script>alert('操作成功提示:成功更新照片!');</script>");          }          else          {            System.IO.File.Delete(picPath);            return Content("<script>alert('错误提示:上传的图片信息不合法!');</script>");          }        }        else        {          return Content("<script>alert('错误提示:上传的文件格式不正确!');</script>");        }      }      else      {        return Content("<script>alert('错误提示:上传的文件是空文件!');</script>");      }    }

View Code

上面代码是一个用户头像更新的代码,也是先将图片等比例放缩(长或宽放缩为280px),也前台页面上面的图片相对应,然后再进行裁剪。

 

第一次团队合作ASP.NET MVC 网站开发总结就到这里吧。

<我的博客主页>:http://www.cnblogs.com/forcheng/