ASP.Net MVC--多图片上传

学习一下WebUploader实现多图片上传，在网上看了一些博客，但大部分都是一样，几乎都是从一篇博客复制的，代码不完整，所以花了一些时间看了一些相关视频，学习一下！记录一下！

首先：引入需要的文件：一个jQuery，一个webuploader的css样式和js文件

<link href="~/webuploader-0.1.5/webuploader.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/webuploader-0.1.5/webuploader.js"></script>

HTML和CSS代码（显示上传按钮，预览图片）：

<style>
        #delimg {
            width: 25px;
            height: 25px;
            margin-left:30px;
        }
    </style>

<div id="uploader-demo">
        <!--用来存放item-->
        <div id="fileList" class="uploader-list"></div>
        <div id="filePicker" style="float:left">预览图片</div>
        <div style="float:left">
            <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; ">
                确定上传
            </button>
        </div>
    </div>

效果图如下：

点击预览图片，将需要上传的图片显示，并附带删除图标（这个地方随意，我是从网上下载的图片，可以用标签，什么都行），点击确定上传，将图片保存到文件夹中，并返回图片上传路径！

JavaScript代码如下：

<script type="text/javascript">
        $(document).ready(function () {
            //开始上传
            $("#ctlBtn").click(function () {
                uploader.upload();
            });
            var uploader = WebUploader.create({

                // 选完文件后，是否自动上传。
                auto: false,
                // swf文件路径
                swf: '~/webuploader-0.1.5/Uploader.swf',//这个地方换成自己文件存放的路径

                // 文件接收服务端。
                server: '/WebUploads/UpLoadProcess',   //控制器动作路径

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

                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            var $list = $("#fileList");
            var thumbnailWidth = "100";
            var thumbnailHeight = "100";
            uploader.on('fileQueued', function (file) {
                var $li = $(
                        '<div style="display:inline-block;margin-left:10px" id="' + file.id + '" class="file-item thumbnail">' +
                            '<img>' +
                            '<div class="info"></div>' +
                            '<img src="/image/delete.png" class="delimg" id="delimg" style="cursor:pointer"/>' +    //这个是删除小图标，自己可以随意下载就行

                        '</div>'
                        ),
                    $img = $li.find('img[id!=delimg]');


                // $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);
            });
            //删除预览图片
            $list.on("click", "#delimg", function () {
                var ID = $(this).parent().attr('id');
                var quID = uploader.getFile(ID);
                uploader.removeFile(quID);
                $(this).parent().remove();
            })
            uploader.on('uploadSuccess', function (file, response) {
                //单个图片上传成功回调函数
            });
            uploader.on('uploadFinished', function (file, response) {
                //所有图片上传成功回调函数
                alert("上传成功");
                $(".delimg").hide();
                    
                
            });
            uploader.on('uploadError', function (file) {
                //文件上传失败，显示上传出错。
            });
        })
    </script>

控制器代码如下：

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
            });

        }

到此结束！当然还可以修改auto属性为True，就会自动上传，还可以加进度条，这些我暂时用不到，就不记录了，后期再总结总结吧！