MVC3.0 之图片上传
第一:引用js 文件和css样式文件(uploadify.css)
第二:根据jqery.uploadify.v2.1.0.js 里面所需要的参数在 view层配置相应参数
View Code
1 //上传
2 $('#fileInput1').uploadify({
3 'uploader': '@Url.Content("~/Content/Album/uploadify.swf")', //浏览按钮swf
4 'script': '/Album/PhotosUpload', //调用方法 new { aaa: $("#saveResualt_CATEGORY_ID").val()
5 'cancelImg': '/Content/Album/cancel.png', // 取消图片
6 'fileExt': '*.jpg;*.gif;*.png', // 过滤类型
7 'fileDesc': '*.jpg;*.gif;*.png', // 提示信息
8 'sizeLimit': 1024*1024*4, // 4M = 4194304
9 'multi': true, // 是否批量
10 'onComplete': UpComplete,
11 'onAllComplete': AllComplete,
12 'queueSizeLimit': 6// 多文件上传时,同时上传文件数目限制
13 });
2 $('#fileInput1').uploadify({
3 'uploader': '@Url.Content("~/Content/Album/uploadify.swf")', //浏览按钮swf
4 'script': '/Album/PhotosUpload', //调用方法 new { aaa: $("#saveResualt_CATEGORY_ID").val()
5 'cancelImg': '/Content/Album/cancel.png', // 取消图片
6 'fileExt': '*.jpg;*.gif;*.png', // 过滤类型
7 'fileDesc': '*.jpg;*.gif;*.png', // 提示信息
8 'sizeLimit': 1024*1024*4, // 4M = 4194304
9 'multi': true, // 是否批量
10 'onComplete': UpComplete,
11 'onAllComplete': AllComplete,
12 'queueSizeLimit': 6// 多文件上传时,同时上传文件数目限制
13 });
第三:在页面提交的时候触发 ajax 调用 AlbumUpLoad 方法 即Controller层的方法
先加载下拉列表 ,加载页面
/// <summary> /// 上传图片页面,下拉列表 /// </summary> /// <remarks> /// Author:lei /// Create Date:2011-06-9 /// </remarks> public ActionResult AlbumUpLoad() { AlbumCategoryViewModel _albumViewModel = new AlbumCategoryViewModel(); IList<ALBUM_CATEGORY> listUnits = GetAlbum(); _albumViewModel.StageList = new SelectList(listUnits, "CATEGORY_ID", "CATEGORY_NAME"); return View(_albumViewModel); }
然后 选好图片点击上传
Controller Code
1 [HttpPost]
2 public ContentResult PhotosUpload(string AlbumID)
3 {
4 try
5 {
// 获取上传文件
fileData = (HttpPostedFile)HttpContext.Current.Request.Files[0];
// 原附件名称
fileName = fileData.FileName.Replace(",", "");
//设置文件名+获取文件扩展名
SavefileName = DateTime.Now.ToString("yyyyMMddHHmmssfffffff") + Path.GetExtension(fileData.FileName);
// 生成要存档的 文件路径和文件名
//判断是否存在上传文件夹,若不存在默认创建
//[2011-09-27 14:57 LEI]
FileHelper.CreateFolder(Server.MapPath("/Upload/OfficialSendDocument/"));
filePath = Path.Combine(Server.MapPath("/Upload/OfficialSendDocument/"), SavefileName);
//上传服务器
fileData.SaveAs(filePath);
16 // 保存上传照片信息 如果保存失败则删除以上传的信息
17 if (!saveFile(album_ID, ImageName,ID))
18 {
19 FileInfo file =new FileInfo(fileName);
20 file.Delete();
21 ImageName ="";
22 }
23 }
24 catch
25 {
26 ImageName ="";
27 }
28 }
29 return Content(ImageName);
30 }
其中 有个地方需要注意:在Web中配置服务器
Webconfig Code
<!--相册-->
<add key="GroupPhotoUp" value="\\192.168.0.130\UpLoadFile\MOE\GroupPhoto"/>
<add key="GroupPhotoUp" value="\\192.168.0.130\UpLoadFile\MOE\GroupPhoto"/>
到此,在MVC3.0下上传图片功能就完成了!
PS:2013 10 19 在mvc文件上传: