MVC学习之六_____上传单张图片

*YH*

浏览: 191646 次
性别:
来自: 广州

最近访客更多访客>>

ccsxin201

watertonylzc

xx5333

chenyanbin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

MVC4

mvc

模板页代码：


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>上传图片</title>
</head>
<body>
    <div> 
        <div class="leftImage">
            <input type="file" id="picAjax" class="customButton" />
            <span id="uploadInfo"></span>
            <input type="button" id="submitPic" class="customButton" value="上传" />
        </div>
        <div class="rightImage">
            <img id="selImg" src="" alt="" />
        </div>
    </div>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //选择图片事件
        var picString = "";
        var id = 11;
        $("#picAjax").change(function (e) {
            var file = e.delegateTarget.files[0];
            　　if (file.type == 'image/jpeg' || file.type == 'image/png') {
                　　　　$("#uploadInfo").text("图片格式正确，请点击提交按钮");
                　　　　var reader = new FileReader();
                　　　　reader.readAsDataURL(file);
                        reader.onload = function (ret)
                        {
                    　　　　picString = reader.result;
                    　　　  //预览图片
                    　　　  $("#selImg").attr({ "src": picString });
                　　　　}
            　　}
            　　else {
                　　　　$("#uploadInfo").text("请上传jpg或png格式的图片！");
            　　}
        });

        //上传图片事件
        $("#submitPic").click(function () {
            if (picString != "") {
                $.ajax("../BasicData/UploadPhoto", {
                    type: "post",
                    datatype: "json",
                    data: {
                        picString:picString,
                        id:id
                    },
                    error: function () { },
                    success: function (result) {
                        if (result.suc == true) {
                            $("#uploadInfo").text("图片上传成功！");
                            $("#ImageList").empty();
                            ReadPicture();
                        }
                    }
                });
            }
        });
    </script>
</body>
</html>

后台代码：

#region 模板页视图
        public ActionResult UploadPhoto()
        {
            return View();
        }
        #endregion

        #region 接收上传图片
        [HttpPost]
        public ActionResult UploadPhoto(string picString, string id)
        {
            var tmpArr = picString.Split(',');
            byte[] bytes = Convert.FromBase64String(tmpArr[1]);
            MemoryStream ms = new MemoryStream(bytes);
            ms.Write(bytes, 0, bytes.Length);
            var img = Image.FromStream(ms, true);

            var path = System.AppDomain.CurrentDomain.BaseDirectory;
            var imagesPath = System.IO.Path.Combine(path, @"Uploads\AgrCorporations\" + id + "\\");
            if (!System.IO.Directory.Exists(imagesPath))
                System.IO.Directory.CreateDirectory(imagesPath);
            string fileName = DateTime.Now.ToString("yyyyMMddHHmmss_ffff", System.Globalization.DateTimeFormatInfo.InvariantInfo) + ".png";
            var bitImage = GetThumbnailImage(img, 400, 300);
            bitImage.Save(imagesPath + fileName);
            bool isOk = true;
            string msg = imagesPath + fileName;
            return Json(new { suc = isOk, msg = msg });
        }


        #endregion

        #region  图片压缩方法
        /// <summary>
        /// 图片压缩方法
        /// </summary>
        /// <param name="srcImage">Image图片</param>
        /// <param name="width">要压缩的图片宽</param>
        /// <param name="height">要压缩的图片高</param>
        /// <returns></returns>
        private static Image GetThumbnailImage(Image srcImage, int width, int height)
        {
            Image bitmap = new Bitmap(width, height);
            Graphics g = Graphics.FromImage(bitmap);

            //设置高质量插值法 
            g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
            g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighSpeed;

            //在指定位置并且按指定大小绘制原图片的指定部分 
            g.DrawImage(srcImage, new Rectangle(0, 0, width, width),
                new Rectangle(0, 0, srcImage.Width, srcImage.Height),
                GraphicsUnit.Pixel);

            return bitmap;
        }
        #endregion

参考：https://www.cnblogs.com/sharealex/articles/8086595.html
原博客中还有删除及查看的方法，可自己学习

分享到：

MVC学习之七_____上传多张图片 | MVC学习之五_____删除记录

2018-09-05 16:00
浏览 583
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

MVC学习之六_____上传单张图片

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

MVC学习之六_____上传单张图片

评论

发表评论

相关推荐

excel文件转为DataTable

DataTable导出excel

EF重新封装查询

EF中批量操作

MVC学习之七_____上传多张图片

MVC学习之五_____删除记录

MVC学习之四_____新增记录

MVC学习之二_____查看详情信息

MVC学习之三_____跳转到编辑页提交信息

MVC学习之一_____实现列表及分页

一个点击事件，action执行两次

App_Data中数据库文件的连接配置

EntityFramework Reverse POCO Code First Generator反向生成代码

使用CodeFirst把类生成数据库【转】

源于nopcommerce的WebApi认证机制

利用动软代码生成器批量生成MVC4框架中的models类

MVC4 官方入门教程（适合初学者）【转】

最近访客更多访客>>