学习一下WebUploader实现多图片上传，在网上看了一些博客，但大部分都是一样，几乎都是从一篇博客复制的，代码不完整，所以花了一些时间看了一些相关视频，学习一下！记录一下！
首先：引入需要的文件：一个jQuery，一个webuploader的css样式和js文件
1<link href="~/webuploader-0.1.5/webuploader.css" rel="stylesheet" /> 2<script src="~/Scripts/jquery-1.10.2.min.js"></script> 3<script src="~/webuploader-0.1.5/webuploader.js"></script>
HTML和CSS代码（显示上传按钮，预览图片）：
1<style> 2 #delimg { 3 width: 25px; 4 height: 25px; 5 margin-left:30px; 6 } 7 </style> 8 9<div id="uploader-demo"> 10 <!--用来存放item--> 11 <div id="fileList" class="uploader-list"></div> 12 <div id="filePicker" style="float:left">预览图片</div> 13 <div style="float:left"> 14 <button id="ctlBtn" style="background-color: #FF5722; height: 41px; line-height: 41px; padding: 0 18px; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 2px; cursor: pointer; "> 15 确定上传 16 </button> 17 </div> 18 </div>
效果图如下：
点击预览图片，将需要上传的图片显示，并附带删除图标（这个地方随意，我是从网上下载的图片，可以用标签，什么都行），点击确定上传，将图片保存到文件夹中，并返回图片上传路径！
JavaScript代码如下：
1<script type="text/javascript"> 2 $(document).ready(function () { 3 //开始上传 4 $("#ctlBtn").click(function () { 5 uploader.upload(); 6 }); 7 var uploader = WebUploader.create({ 8 9 // 选完文件后，是否自动上传。 10 auto: false, 11 // swf文件路径 12 swf: '~/webuploader-0.1.5/Uploader.swf',//这个地方换成自己文件存放的路径 13 14 // 文件接收服务端。 15 server: '/WebUploads/UpLoadProcess', //控制器动作路径 16 17 // 选择文件的按钮。可选。 18 // 内部根据当前运行是创建，可能是input元素，也可能是flash. 19 pick: '#filePicker', 20 21 // 只允许选择图片文件。 22 accept: { 23 title: 'Images', 24 extensions: 'gif,jpg,jpeg,bmp,png', 25 mimeTypes: 'image/*' 26 } 27 }); 28 var $list = $("#fileList"); 29 var thumbnailWidth = "100"; 30 var thumbnailHeight = "100"; 31 uploader.on('fileQueued', function (file) { 32 var $li = $( 33 '<div style="display:inline-block;margin-left:10px" id="' + file.id + '" class="file-item thumbnail">' + 34 '<img>' + 35 '<div class="info"></div>' + 36 '<img src="https://my.oschina.net/image/delete.png" class="delimg" id="delimg" style="cursor:pointer"/>' + //这个是删除小图标，自己可以随意下载就行 37 38 '</div>' 39 ), 40 $img = $li.find('img[id!=delimg]'); 41 42 43 // $list为容器jQuery实例 44 $list.append($li); 45 46 // 创建缩略图 47 // 如果为非图片文件，可以不用调用此方法。 48 // thumbnailWidth x thumbnailHeight 为 100 x 100 49 uploader.makeThumb(file, function (error, src) { 50 if (error) { 51 $img.replaceWith('<span>不能预览</span>'); 52 return; 53 } 54 55 $img.attr('src', src); 56 }, thumbnailWidth, thumbnailHeight); 57 }); 58 //删除预览图片 59 $list.on("click", "#delimg", function () { 60 var ID = $(this).parent().attr('id'); 61 var quID = uploader.getFile(ID); 62 uploader.removeFile(quID); 63 $(this).parent().remove(); 64 }) 65 uploader.on('uploadSuccess', function (file, response) { 66 //单个图片上传成功回调函数 67 }); 68 uploader.on('uploadFinished', function (file, response) { 69 //所有图片上传成功回调函数 70 alert("上传成功"); 71 $(".delimg").hide(); 72 73 74 }); 75 uploader.on('uploadError', function (file) { 76 //文件上传失败，显示上传出错。 77 }); 78 }) 79 </script>
控制器代码如下：
1public 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 }
到此结束！当然还可以修改auto属性为True，就会自动上传，还可以加进度条，这些我暂时用不到，就不记录了，后期再总结总结吧！