本文实例为大家分享了swupload实现多图片上传的具体代码，供大家参考，具体内容如下

1. 下载WebUploader

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

3. 添加引用

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

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

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

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

<script type="text/javascript">

 var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
 $(function () {
 var $ = jQuery,
 $list = $('#fileList'),
 // 优化retina, 在retina下这个值是2
 ratio = window.devicePixelRatio || 1,
 // 缩略图大小
 thumbnailWidth = 90 * ratio,
 thumbnailHeight = 90 * ratio,
 // Web Uploader实例
 uploader;
 uploader = WebUploader.create({
 // 选完文件后，是否自动上传。
 auto: false,

 // swf文件路径
 swf: applicationPath + '/Script/Uploader.swf',

 // 文件接收服务端。
 server: applicationPath + '/Home/UpLoadProcess',

 // 选择文件的按钮。可选。
 // 内部根据当前运行是创建，可能是input元素，也可能是flash.
 pick: '#filePicker',

 //只允许选择图片
 accept: {
 title: 'Images',
 extensions: 'gif,jpg,jpeg,bmp,png',
 mimeTypes: 'image/*'
 }
 });
 
 // 当有文件添加进来的时候
 uploader.on('fileQueued', function (file) {
 var $li = $(
 '<div id="' + file.id + '" class="cp_img">' +
 '<img>' +
 '<div class="cp_img_jian"></div></div>'
 ),
 $img = $li.find('img');


 // $list为容器jQuery实例
 $list.append($li);

 // 创建缩略图
 // 如果为非图片文件，可以不用调用此方法。
 // thumbnailWidth x thumbnailHeight 为 100 x 100
 uploader.makeThumb(file, function (error, src) {
 if (error) {
 $img.replaceWith('<span>不能预览</span>');
 return;
 }

 $img.attr('src', src);
 }, thumbnailWidth, thumbnailHeight);
 });

 // 文件上传过程中创建进度条实时显示。
 uploader.on('uploadProgress', function (file, percentage) {
 var $li = $('#' + file.id),
 $percent = $li.find('.progress span');

 // 避免重复创建
 if (!$percent.length) {
 $percent = $('<p class="progress"><span></span></p>')
 .appendTo($li)
 .find('span');
 }

 $percent.css('width', percentage * 100 + '%');
 });

 // 文件上传成功，给item添加成功class, 用样式标记上传成功。
 uploader.on('uploadSuccess', function (file, response) {
 
 $('#' + file.id).addClass('upload-state-done');
 });

 // 文件上传失败，显示上传出错。
 uploader.on('uploadError', function (file) {
 var $li = $('#' + file.id),
 $error = $li.find('div.error');

 // 避免重复创建
 if (!$error.length) {
 $error = $('<div class="error"></div>').appendTo($li);
 }

 $error.text('上传失败');
 });

 // 完成上传完了，成功或者失败，先删除进度条。
 uploader.on('uploadComplete', function (file) {
 $('#' + file.id).find('.progress').remove();
 });

 //所有文件上传完毕
 uploader.on("uploadFinished", function ()
 {
 //提交表单

 });

 //开始上传
 $("#ctlBtn").click(function () {
 uploader.upload();

 });

 //显示删除按钮
 $(".cp_img").live("mouseover", function ()
 {
 $(this).children(".cp_img_jian").css('display', 'block');

 });
 //隐藏删除按钮
 $(".cp_img").live("mouseout", function () {
 $(this).children(".cp_img_jian").css('display', 'none');

 });
 //执行删除方法
 $list.on("click", ".cp_img_jian", function ()
 {
 var Id = $(this).parent().attr("id");
 uploader.removeFile(uploader.getFile(Id,true));
 $(this).parent().remove();
 });
 
 });


</script>

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

public ActionResult UpLoadProcess(string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase file)
 {
 string filePathName = string.Empty;

 string localPath = Path.Combine(HttpRuntime.AppDomainAppPath, "Upload");
 if (Request.Files.Count == 0)
 {
 return Json(new { jsonrpc = 2.0, error = new { code = 102, message = "保存失败" }, id = "id" });
 }

 string ex = Path.GetExtension(file.FileName);
 filePathName = Guid.NewGuid().ToString("N") + ex;
 if (!System.IO.Directory.Exists(localPath))
 {
 System.IO.Directory.CreateDirectory(localPath);
 }
 file.SaveAs(Path.Combine(localPath, filePathName));

 return Json(new
 {
 jsonrpc = "2.0",
 id = id,
 filePath = "/Upload/" + filePathName
 });
 
 }

这样就大功告成了。

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

源码下载：swupload实现多图片上传