ASP.NET MVC 图片上传到服务器

今天在做项目中需要做一个功能是:把个人图片上传到服务器中,并把路径保存到数据库中!自己摸索着做了出来,但不是很完善,先记录下来,后台获取到前端传过来的文件进行上传!

后台代码:

        /// <summary>
        /// 把图片上传到服务器并保存路径到数据库
        /// </summary>
        /// <returns></returns>
        public string SaveImage()
        {
            string result = "";
            HttpPostedFileBase imageName = Request.Files["image"];// 从前台获取文件
            string file = imageName.FileName;
            string fileFormat = file.Split('.')[file.Split('.').Length - 1]; // 以“.”截取,获取“.”后面的文件后缀
            Regex imageFormat = new Regex(@"^(bmp)|(png)|(gif)|(jpg)|(jpeg)"); // 验证文件后缀的表达式(自己写的,不规范别介意哈)
            if (string.IsNullOrEmpty(file) || !imageFormat.IsMatch(fileFormat)) // 验证后缀,判断文件是否是所要上传的格式
            {
                result = "error";
            }
            else
            {
                string timeStamp = DateTime.Now.Ticks.ToString(); // 获取当前时间的string类型
                string firstFileName = timeStamp.Substring(0, timeStamp.Length - 4); // 通过截取获得文件名
                string imageStr = "Images/StudentImage/"; // 获取保存图片的项目文件夹
                string uploadPath = Server.MapPath("~/" + imageStr); // 将项目路径与文件夹合并
                string pictureFormat = file.Split('.')[file.Split('.').Length - 1];// 设置文件格式
                string fileName = firstFileName + "." + fileFormat;// 设置完整(文件名+文件格式) 
                string saveFile = uploadPath + fileName;//文件路径
                imageName.SaveAs(saveFile);// 保存文件
                // 如果单单是上传,不用保存路径的话,下面这行代码就不需要写了!
                string image = imageStr + fileName;// 设置数据库保存的路径

                result = "success";
            }
            return result;
        }

html代码比较简单,使用的是easyui 1.5.4 版本的框架:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" charset="utf-8" />
    <link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/themes/default/easyui.css" />
    <link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/themes/icon.css" />
    <link rel="stylesheet" href="~/Content/jquery-easyui-1.5.4.4/demo/demo.css" />
    <script src="~/Content/jquery-easyui-1.5.4.4/jquery.min.js"></script>
    <script src="~/Content/jquery-easyui-1.5.4.4/jquery.easyui.min.js"></script>
</head>
<body>
    
    <div id="student_sdlg" class="easyui-dialog" style="width:530px;height:350px;padding:10px 20px;" closed="false"
         buttons="#student-dlg-buttons" closable="false">
        <form id="student_sfm" method="post" enctype="multipart/form-data">
            <table cellspacing="8">
                <tr>
                    <td>图  片:</td>
                    <td colspan="3">
                        <input id="image" name="image" class="easyui-filebox" style="width:387px;" data-options="buttonText:'浏 览'" />
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="student-dlg-buttons">
        <a href="javascript:saveStudent();" class="easyui-linkbutton" iconCls="icon-ok">保存</a>
    </div>

    <script>

        // 保存图片
        function saveStudent() {
            $("#student_sfm").form("submit", {
                url: "/Teacher/Teacher/SaveImage", // 上传图片链接
                success: function (result) {
                    if (result == "success") {
                        $.messager.alert("系统提示", "保存成功!");
                        resetForm();
                    } else if (result == "error") {
                        $.messager.alert("系统提示", "保存失败!");
                        return;
                    }
                }
            })
        }

        // 清空表单数据
        function resetForm() {
            $("#student_sfm").form('clear');
        }
    </script>
</body>
</html>
到这里图片上传功能到这里就结束了,当然了,自己小白一个,写得肯定不是很专业,漏洞也很多!大佬们多多谅解!

转载请注明出处:https://blog.csdn.net/molixiangshi/article/details/80259082 !


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页