ASP.NET MVC 上传图片例子

最新推荐文章于 2024-05-26 08:15:00 发布

罗汉松驻扎的工作基地

最新推荐文章于 2024-05-26 08:15:00 发布

阅读量1.2k

点赞数

文章标签： mvc jquery javascript

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/126174563

版权

本文介绍了如何使用ASP.NET MVC和jQuery实现图片上传功能，包括创建Model、Controller的处理逻辑以及View中的HTML输入和AJAX调用。重点在于前端文件选择和后端文件存储的配合。

摘要由CSDN通过智能技术生成

下面是一个简单用jquery 上传图片的例子，简单用到 <input type='file' 的html按钮。

网上还有很多jquery 插件，比如：Uploadify ，比如百度的webupload 等等。

运行界面如下

首先建立一个asp.net mvc 空项目，然后引入jquery.js 文件。

然后开始写代码

建立一个前后端用于图片上传的消息返回对象（model）

   public class ImageUploadResult
    {
        /// <summary>
        /// 上传状态：SUCCESS 或ERROR 
        /// </summary>
        public string state { get; set; }

        /// <summary>
        /// 图片地址 
        /// </summary>
        public string url { get; set; }

        /// <summary>
        /// 图片标题（我用guid代替原始标题）
        /// </summary>
        public string title { get; set; }

        /// <summary>
        /// 图片原标题
        /// </summary>
        public string original { get; set; }

        /// <summary>
        /// 错误内容
        /// </summary>
        public string error { get; set; }
    }

然后编辑controller

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;

namespace NFine.Web.Controllers
{
    public class ImageUploadController : Controller
    {
         

        [HttpPost]
        public ActionResult UploadDrawing()
        {
            ImageUploadResult uploadRes = new ImageUploadResult();

            try
            {
                if (Request.Files.Count > 0)
                {
                    //该例子只存储第一个图片
                    HttpPostedFileBase file = Request.Files[0];

                    if (file.ContentLength > 0)
                    {
                        //日志文件夹路径
                        string LogFileWJJ = AppDomain.CurrentDomain.BaseDirectory + "MyDrawingImage";
                        if (System.IO.File.Exists(LogFileWJJ) == false)
                        {
                            //不存在MyLog文件夹就创建
                            Directory.CreateDirectory(LogFileWJJ);
                        }

                        //当前日期的文件夹路径
                        string jinTian = LogFileWJJ + "\\" + DateTime.Now.ToString("yyyyMMdd");
                        if (System.IO.File.Exists(jinTian) == false)
                        {
                            Directory.CreateDirectory(jinTian);
                        }

                        //图片guid名称
                        string lastname = Path.GetExtension(file.FileName);
                        string title = Guid.NewGuid().ToString() + lastname;

                        //string path = jinTian + "\\" + title;
                        string path = string.Format("../{0}/{1}/{2}", "MyDrawingImage", DateTime.Now.ToString("yyyyMMdd"), title);
                        path = System.Web.HttpContext.Current.Server.MapPath(path);
                        file.SaveAs(path);

                        uploadRes.state = "SUCCESS";
                        uploadRes.url = path;         //CurrentURL + "/Editor/ShowImage?imagetitle=" + title;
                        uploadRes.title = title;
                        uploadRes.original = file.FileName;
                        uploadRes.error = "";
                    }
                }
            }
            catch (Exception ex)
            {
                uploadRes.state = "ERROR";
                uploadRes.error = ex.Message;
            }

            return Json(uploadRes);
        }

    }

然后编辑view


@*upload test page*@
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
 
    <script src="~/Contents/js/jquery/jquery.js"></script> 
</head>
<body>
    <div id="contentDIV"> 

        <div><p>原始jq按钮</p></div>
        
        <div id="yuanshi">
            <input type="file" id="upfile" name="upfile"  />
            <p>
                <input type="text" id="orgName" name="orgName" style="width:200px;" value="原始中文名" />
            </p>
            <p>
                <input type="text" id="succName" name="succName" style="width:900px;" value="服务器文件名称" />
            </p>
        </div>

    </div>

    <script type="text/javascript">

        $(function () {


            //简单上传按钮
            $("#upfile").on("change", function () {
                var file = this.files[0];
                var data = new FormData();
                data.append("file", file);
                console.log(data);
                console.log(file);

                $.ajax({
                    type: "post",
                    url: "/home/UploadDrawing",
                    data: data,
                    contentType: false,
                    //默认文件类型application/x-www-form-urlencoded  设置之后multipart/form-data
                    processData: false,
                    // 默认情况下会对发送的数据转化为对象 不需要转化的信息
                    success: function (res) {
                        //source = res.picAddr;
                        $('#succName').val(res.url);
                        $('#orgName').val(res.original);
                    },
                });
            });
 

        });  //end page ready

    </script>

</body>
</html>

这样就可以运行试试了。