Asp.Net Mvc 使用WebUploader 多图片上传

来博客园有一个月了，哈哈。在这里学到了很多东西。今天也来试着分享一下学到的东西。希望能和大家做朋友共同进步。

      最近由于项目需要上传多张图片，对于我这只菜鸟来说，以前上传图片都是直接拖得控件啊，而且还是一次只能传一张。由于现在 项目用的是MVC，像Asp那样 拖控件 是不现实了。在我脑海中立刻就浮现出一个想法，网上一定有插件，哈哈。去网上一搜索，哇哦这么多。在众多的插件中我被百度的WebUploader吸引了。官网上写着:"WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件...”；就是这句里面的"简单"和"现代" 这两个词深深的吸引了我，当然官网提供的Demo也很酷，而且还是开源的，哇咔咔。既然决定用这个了，我就下了一份源代码下来。打开一看，什么gui ，居然是php的。当时的心情你们能理解么？于是我就抱着试一试的心态搜索了一下 "webuploader asp.net" 哈哈居然搜到到Demo了.Demo 是从 eflay 这位前辈的博客上看的。我借用了他的后台方法，由于前面js写的太复杂我没敢用。好了不扯废话了下面就来演示根据WebUploader官方提供的API和前面说的那位前辈的后台方法完成图片上传。

1. 下载WebUploader

2. 将下载到的压缩包里面的文件复制到自己的项目中   

3. 添加引用

1 
2 <script src="~/Script/jquery-1.8.2.min.js">script>
3 
4 <link href="~/CSS/webuploader.css" rel="stylesheet" />
5 
6 <script src="~/Script/webuploader.js">script>

4.准备一个放图片的容器和一个上传按钮

<div id="fileList">div> 
<div class="cp_img_jia" id="filePicker">div> 

5.创建Web Uploader实例并监听事件

  1 

6 在Controller里新建一个Action用于保存图片并返回图片路径（这方法是 eflay 前辈博客上说的）

 1  public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
 2         {
 3             string filePathName = string.Empty;
 4 
 5             string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
 6             if (Request.Files.Count == 0)
 7             {
 8                 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
 9             }
10 
11             string ex = Path.GetExtension(file.FileName);
12             filePathName = Guid.NewGuid().ToString("N") + ex;
13             if (!System.IO.Directory.Exists(localPath))
14             {
15                 System.IO.Directory.CreateDirectory(localPath);
16             }
17             file.SaveAs(Path.Combine(localPath, filePathName));
18 
19             return Json(new
20             {
21                 jsonrpc = "2.0",
22                 id = id,
23                 filePath = "/Upload/" + filePathName
24             });
25         
26         }

这样就大功告成了。由于是第一次写博客，里面如果有写的不详细或不对的地方，欢迎大家指点。希望能和大家一起进步。

Demo下载地址http://pan.baidu.com/s/1hqqvB0o