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>

要使用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 > )

            {

                if (pictureFile.ContentLength > )

                {

                    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)( * (height / width));

                        width = ;

                    }

                    else

                    {

                        width = (int)( * (width / height));

                        height = ;

                    }

                    image.Resize((int)width, (int)height);//调整图片大小

                    var length = x2 - x1;

                    if (x1 >=  && x1 <=  && y1 >=  && y1 <=  && length >=  && length <=  && 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>");

            }

        }

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

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

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

巴特西

ASP.NET MVC 网站开发总结（三） ——图片截图上传

最新文章

热门文章