ASP.NET MVC 网站开发总结（二）——一个或多个文件的异步或同步上传

来源：互联网发布：己知阴影面积为10dm 编辑：程序博客网时间：2024/06/17 17:50

简而言之，直接用代码展示如何实现文件的上传，这里需要使用到一个bootstrap的文件上传插件File Input（请自行下载）。

前台页面：

<!----><!DOCTYPE html><html >    <head>        <meta charset="UTF-8">        <link rel="stylesheet" href="css/bootstrap.min.css" />        <link rel="stylesheet" href="css/default.css" />        <link rel="stylesheet" href="css/fileinput.css" />            </head>    <body>        <div class="form-group add-pic-box">            <h2 class="add-pic-head">添加图片</h2>                   <input id="upload-file"  type="file" multiple class="file" data-min-file-count="1">             </div>        <script type="text/javascript" src="js/jquery-2.1.1.min.js" ></script>        <script type="text/javascript" src="js/bootstrap.min.js" ></script>        <script type="text/javascript" src="js/fileinput.js" ></script>        <script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>        <script type="text/javascript">        //当然这里参数没有介绍完，可以更具需求参考其使用文档        $("#upload-file").fileinput({            uploadUrl: '/User/AddPicture', //这是要将文件上传到哪里的url            uploadAsync: false,//是否进行文件异步上传            maxFileSize: 10485760,//字节，fileinput.js默认是按照1000个字节为1kb来计算的，这个自己可以修改为1024            minFileCount: 1,//最少上传文件数量            maxFileCount: 1,//最大上传文件数量            allowedFileExtensions: ['jpg', 'png', 'gif'],//上传文件限制的类型            uploadExtraData: function () {           //这里是附加数据 description 对应于后台Action中的参数名称            return { description: "这是一个描述" };//可以更加需求获取一个动态的值        },        ajaxSettings: {            //这里是重写文件上传成功后，前台处理后台返回json数据            success: function(data)            {                alert(data.title, data.massage);            }        }    });        </script>    </body></html>

要使用File Input插件上传文件主要要引入了fileinput.css、fileinput.js以及fileinput_locale_zh.js（中文化）三个文件，其它的都是bootstrap的一些样式（当然要使用jquery，就应当引人jquery-2.1.1.min.js或其它版本）。

后台处理代码：

//添加图片        [HttpPost]        public ActionResult AddPicture(string description)        {            var result = new JsonResult();            //result.JsonRequestBehavior = JsonRequestBehavior.DenyGet;            if (string.IsNullOrWhiteSpace(description))            {                description = "暂无";            }            description = description.Trim();            if (Request.Files.Count == 0)            {                return Json(new { title = "上传失败", massage = "上传图片不能为空!" });            }            HttpPostedFileBase newPicture = Request.Files[0];            if (description.Length > 20 || newPicture == null)            {                return Json(new { title = "上传失败", massage = "图片简介长度不合要求!" });            }            int id = Convert.ToInt32(User.Identity.Name);            string fileExt = "", fileName = "", path = Server.MapPath("~/Resources/LocalPic");            if (newPicture.ContentLength <= 10485760)            {                Picture picture = new Picture();                picture.UserId = id;                picture.Name = newPicture.FileName.Split('\\').Last();                picture.CreateTime = DateTime.Now;                picture.IsForbidden = false;                picture.IsShareOut = false;                picture.Description = description;                 if (picture.Name.IndexOf('.') > -1)                {                    fileExt = picture.Name.Substring(picture.Name.LastIndexOf('.')).ToLower();                }                switch (fileExt)                {                    case ".jpg":                    case ".png":                    case ".gif":                        break;                    default:                        return Json(new { title = "上传失败", massage = "图片后缀名不合要求!" });                }                fileName = DateTime.Now.ToFileTime() + Guid.NewGuid().ToString("N") + fileExt;                picture.FilePath =  fileName;                newPicture.SaveAs(path + @"\" + fileName);//从客户端保存文件到本地                entity.Pictures.Add(picture);                entity.SaveChanges();                return Json(new { title = "上传成功", massage = "成功上传图片!" });            }            else            {                return Json(new { title = "上传失败", massage = "图片大小不合要求!" });            }        }

上面代码给出的是上传一张图片的的实例，若是想上传多个文件，只需更改文件后缀限制、改变maxFileCount的值以及后台处理作相应的改变，若是想采用异步上传，只需将前台代码中的uploadAsync的值改为true就可以（默认也是true）。其它的一些功能实现留给读者自己去探索和实现吧！^_^

0 0