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，就會自動上傳，還可以加進度條，這些我暫時用不到，就不記錄了，后期再總結總結吧！