当前位置：首页 > 行业动态 > 正文

c#mvc上传图片到服务器

在C# MVC中，通过创建HTML表单、使用HttpPostedFileBase接收文件、保存文件到服务器指定路径来实现图片上传。

在C# MVC中实现图片上传到服务器的功能，主要涉及到前端页面的设计、后端控制器的处理以及文件的保存等步骤，以下是一个详细的实现过程：

一、创建MVC项目及模型

1、创建项目：打开Visual Studio，选择“文件”->“新建”->“项目”，选择“ASP.NET Web应用程序（.NET Framework）”，命名项目并选择合适的框架版本和存储位置后点击“确定”。

2、添加模型类：在“Model”文件夹下创建一个名为“UploadPicResult”的类，用于封装上传结果的信息，代码如下：

    public class UploadPicResult
    {
        public int filenum { get; set; }
        public string src { get; set; }
        public string name { get; set; }
        public string msg { get; set; }
    }

二、配置路由与控制器

1、注册路由：在“App_Start”文件夹下的“RouteConfig.cs”中注册与图片上传相关的路由，

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
            // 添加图片上传路由
            routes.MapRoute(
                name: "UploadImage",
                url: "Upload/UploadImage",
                defaults: new { controller = "Upload", action = "UploadImage" }
            );
        }
    }

2、创建控制器：在“Controllers”文件夹下创建一个名为“UploadController”的控制器，用于处理图片上传请求，代码如下：

    public class UploadController : Controller
    {
        [HttpPost]
        public ActionResult UploadImage()
        {
            try
            {
                var file = HttpContext.Current.Request.Files[0]; //获取选中文件
                if (file == null || String.IsNullOrEmpty(file.FileName) || file.ContentLength == 0)
                {
                    return new UploadPicResult
                    {
                        filenum = 0,
                        src = "",
                        name = "",
                        msg = "上传出错"
                    };
                }
                string local = "UploadPic\" + DateTime.Now.Year + "\" + DateTime.Now.Month + "\" + DateTime.Now.Day;
                string filePathName = Guid.NewGuid().ToString("N") + "." + Path.GetExtension(file.FileName);
                string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, local);
                if (!System.IO.Directory.Exists(localPath))
                {
                    System.IO.Directory.CreateDirectory(localPath);
                }
                string localURL = Path.Combine(local, filePathName).Replace("\", "/");
                file.SaveAs(Path.Combine(localPath, filePathName)); //保存图片
                return new UploadPicResult
                {
                    filenum = 1,
                    src = localURL,
                    name = Path.GetFileNameWithoutExtension(file.FileName),
                    msg = "上传成功"
                };
            }
            catch (Exception ex)
            {
                return new UploadPicResult
                {
                    filenum = 0,
                    src = "",
                    name = "",
                    msg = "上传出错"
                };
            }
        }
    }

三、前端页面设计

1、创建视图：在“Views”文件夹下的“Upload”文件夹中创建一个名为“UploadImage.cshtml”的视图，用于展示图片上传的页面，代码如下：

    @{
        Layout = null;
    }
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>图片上传</title>
    </head>
    <body>
        <form id="uploadForm" action="/Upload/UploadImage" method="post" enctype="multipart/form-data">
            <input type="file" name="file" id="file" />
            <input type="submit" value="上传" />
        </form>
        <div id="result"></div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#uploadForm').on('submit', function (e) {
                    e.preventDefault();
                    var formData = new FormData(this);
                    $.ajax({
                        url: $(this).attr('action'),
                        type: 'POST',
                        data: formData,
                        contentType: false, //必须false才会自动加上正确的Content-Type
                        processData: false, //必须false才会避开jQuery对 formdata 的默认处理，XMLHttpRequest会对 formdata 进行正确的处理
                        success: function (data) {
                            $('#result').html('<p>' + data.msg + '</p><img src="' + data.src + '" alt="' + data.name + '"/>');
                        },
                        error: function () {
                            $('#result').html('<p>上传失败！</p>');
                        }
                    });
                });
            });
        </script>
    </body>
    </html>

2、引用视图：在“HomeController”的“Index”方法或其他需要展示图片上传页面的地方，返回“Upload/UploadImage”视图，

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View("~/Views/Upload/UploadImage.cshtml");
        }
    }

四、运行项目并测试

1、按F5运行项目，在浏览器中访问首页，会显示图片上传页面。

2、点击“选择文件”按钮，选择一个本地图片文件，然后点击“上传”按钮，即可将图片上传到服务器指定的目录，并在页面上显示上传结果和图片预览。

通过以上步骤，就可以在C# MVC中实现图片上传到服务器的功能，开发者还可以根据实际需求进一步扩展和完善该功能，如添加图片大小限制、格式验证、批量上传等功能。

C MVC图片上传服务器存储
0

相关文章