你的位置:首页 > ASP.net教程

[ASP.net教程]ASP.NET MVC 网站开发总结(二)——一个或多个文件的异步或同步上传


简而言之,直接用代码展示如何实现文件的上传,这里需要使用到一个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>

View Code

要使用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 = "图片大小不合要求!" });      }    }

View Code

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

 

下一节中我们将要谈到图片的截图上传。

<我的博客主页>:http://www.cnblogs.com/forcheng/