swupload多图片上传Asp.net MVC

1. 下载WebUploader

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

3. 添加引用

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

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

<div id="fileList"></div> <!--这是存放图片的容器-->
<div class="cp_img_jia" id="filePicker"></div> <!--这是上传按钮-->

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

1 <script type="text/javascript">
2
3     var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
4     $(function () {
5         var $ = jQuery,
6         $list = $('#fileList'),
7         // 优化retina, 在retina下这个值是2
8         ratio = window.devicePixelRatio || 1,
9         // 缩略图大小
10         thumbnailWidth = 90 * ratio,
11         thumbnailHeight = 90 * ratio,
12         // Web Uploader实例
13         uploader;
14         uploader = WebUploader.create({
15             // 选完文件后，是否自动上传。
16             auto: false,
17
18             // swf文件路径
19             swf: applicationPath + '/Script/Uploader.swf',
20
21             // 文件接收服务端。
22             server: applicationPath + '/Home/UpLoadProcess',
23
24             // 选择文件的按钮。可选。
25             // 内部根据当前运行是创建，可能是input元素，也可能是flash.
26             pick: '#filePicker',
27
28             //只允许选择图片
29             accept: {
30                 title: 'Images',
31                 extensions: 'gif,jpg,jpeg,bmp,png',
32                 mimeTypes: 'image/*'
33             }
34         });
35
36         // 当有文件添加进来的时候
37         uploader.on('fileQueued', function (file) {
38             var $li = $(
39                     '<div id="' + file.id + '" class="cp_img">' +
40                         '<img>' +
41                     '<div class="cp_img_jian"></div></div>'
42                     ),
43                 $img = $li.find('img');
44
45
46             // $list为容器jQuery实例
47             $list.append($li);
48
49             // 创建缩略图
50             // 如果为非图片文件，可以不用调用此方法。
51             // thumbnailWidth x thumbnailHeight 为 100 x 100
52             uploader.makeThumb(file, function (error, src) {
53                 if (error) {
54                     $img.replaceWith('<span>不能预览</span>');
55                     return;
56                 }
57
58                 $img.attr('src', src);
59             }, thumbnailWidth, thumbnailHeight);
60         });
61
62         // 文件上传过程中创建进度条实时显示。
63         uploader.on('uploadProgress', function (file, percentage) {
64             var $li = $('#' + file.id),
65                 $percent = $li.find('.progress span');
66
67             // 避免重复创建
68             if (!$percent.length) {
69                 $percent = $('<p class="progress"><span></span></p>')
70                         .appendTo($li)
71                         .find('span');
72             }
73
74             $percent.css('width', percentage * 100 + '%');
75         });
76
77         // 文件上传成功，给item添加成功class, 用样式标记上传成功。
78         uploader.on('uploadSuccess', function (file, response) {
79
80             $('#' + file.id).addClass('upload-state-done');
81         });
82
83         // 文件上传失败，显示上传出错。
84         uploader.on('uploadError', function (file) {
85             var $li = $('#' + file.id),
86                 $error = $li.find('div.error');
87
88             // 避免重复创建
89             if (!$error.length) {
90                 $error = $('<div class="error"></div>').appendTo($li);
91             }
92
93             $error.text('上传失败');
94         });
95
96         // 完成上传完了，成功或者失败，先删除进度条。
97         uploader.on('uploadComplete', function (file) {
98             $('#' + file.id).find('.progress').remove();
99         });
100
101         //所有文件上传完毕
102         uploader.on("uploadFinished", function ()
103         {
104            //提交表单
105
106         });
107
108         //开始上传
109         $("#ctlBtn").click(function () {
110             uploader.upload();
111
112         });
113
114         //显示删除按钮
115         $(".cp_img").live("mouseover", function ()
116         {
117             $(this).children(".cp_img_jian").css('display', 'block');
118
119         });
120         //隐藏删除按钮
121         $(".cp_img").live("mouseout", function () {
122             $(this).children(".cp_img_jian").css('display', 'none');
123
124         });
125         //执行删除方法
126         $list.on("click", ".cp_img_jian", function ()
127         {
128             var Id = $(this).parent().attr("id");
129             uploader.removeFile(uploader.getFile(Id,true));
130             $(this).parent().remove();
131         });
132
133     });
134
135
136 </script>

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