MVC 4 結合jquery.uploadify 上傳實例

 

前言：由於今天公司源代碼服務癱瘓，沒法編寫代碼，利用這個有限的時間，做了一個小小的 基於MVC的圖片上傳demo，貌似近些年來MVC十分火爆，相關的demo也數不勝數，小弟就在這里打着MVC的旗子，狐假虎威了，MVC和WebForm上傳其實都是一樣一樣的，沒有任何不妥的地方，就如前面所說的一樣，我只是打着MVC的旗子，不知不覺說了這么多，最近感覺廢話特別多，不說了，咋們程序猿都喜歡看干貨，下面上菜

 

必備工具：1. jquery.js 這個玩意大家都知道，不用多說 官網地址

               2. jquery.uploadify.js 這就是上傳時用的到js了，相信大家都有所了解，這個是結合flash做的上傳，官網地址，官網里面有下載地址，還有api，我用的是最新版本的，所以里面有很多              

                   參數和老版本是不一樣的，所以大家得留意一下，順便貼出api訪問地址

               3. vs2010 + mvc 4.0 (這些都是幌子，你建一個mvc 3.0 的，或者是WebForm都一樣，只要提取部分代碼，都能實現)

 

大家看看功能就行了，界面美工程度，大家勿噴，先說說功能吧

1. 限制文件上傳類型，我的限制是：*.gif; *.jpg; *.png; *.jpeg，這里的客戶端驗證，但是不缺一些不法分子，所以我們也需要在后太上傳是做驗證，雙保險（但demo在是沒有做）

2. 限制文件上傳大小100000000KB

3. 選擇文件上傳數量

4. 選擇文件自動上傳，完成時有完成多少，比如：50% 顯示方式，完成后100% 立即顯示完成的圖片

5. 刪除上傳文件，（好吧，我承認這里做得太假，糊弄了大家，大家就看看得了，不要深究，深究的話，自己把上傳到服務的文件刪除就行了）

6. 多文件上傳方式

 

先貼張功能的圖片：

這張是同時選擇多個文件，是上傳的樣子：

 

樣子就是這樣的了，哎，我自己都看不下去了，我還是趕快貼代碼，不能在看到這張圖片了：

先是html代碼：

 

<script type="text/javascript">
        $(function () {
            $("#file_upload").uploadify({
                queueID: "1",
                swf: '/Scripts/uploadify/uploadify.swf',
                uploader: '/Home/Upload', // 上傳文件，后台上傳方法
                buttonImage: "/images/xiangcebiaoqian_anniu.gif", // 按鈕圖片地址
                fileSizeLimit: '100000000KB', // 最大允許文件上傳大小，這里是 10M
                fileTypeDesc: 'Image Files',
                fileTypeExts: '*.gif; *.jpg; *.png; *.jpeg',
                auto: true, // 自動上傳
                uploadLimit: 20, // 允許文件上傳個數
                queueSizeLimit: 5, // 允許同時文件上傳個數
                width: 159, // 上傳按鈕的寬度
                height: 47, // 上傳按鈕的高度
                onSelect: function (file) { // 選擇文件的事件
                    var name = file.name;
                    if (name.length >= 10) {
                        var index = name.lastIndexOf(".");
                        name = name.substr(0, 8) + "...." + name.substr(index + 1);
                    }
                    var html = '<div id="div_id_' + file.id + '" class="uploading"><div id="div_title_' + file.id + '" class="uploading_file_name">' + name + '<div><div id="div_uploading_' + file.id + '" class="uploading_schedule">0%</div></div>';
                    $("#div_img_list").append(html);

                },
                onUploadProgress: function (file, bytesUploaded, bytesTotal, totalBytesUploaded, totalBytesTotal) { // 上傳文件的進度事件
                    var v = Math.round(bytesUploaded / bytesTotal * 100);
                    $('#div_uploading_' + file.id).html(v + "%");
                },
                onUploadSuccess: function (file, data, response) { // 上傳文件成功之后的事件
                    $("#div_title_" + file.id).remove();
                    $("#div_uploading_" + file.id).remove();
                    var html = '<img alt="" src="' + data + '" />';
                    html += "<a href=\"javascript:\" onclick=\"DeleteFile('" + file.id + "');\">X</a>";
                    $("#div_id_" + file.id).html(html);
                }
            });
        });

        // 移除圖片
        function DeleteFile(id) {
            $("#div_id_" + id).remove();
        }
    </script>

 

然后是后台代碼：

[HttpPost]
        public string Upload(FormCollection fc)
        {
            string newFileName = string.Empty;
            //判斷Request中是否有接收Files文件
            if (Request.Files.Count != 0)
            {
                Thread.Sleep(1000);
                //HttpPostedFileBase類，提供對用戶上載的單獨文件的訪問
                //獲取到用戶上傳的文件
                HttpPostedFileBase file = Request.Files[0];

                //獲取用戶上傳文件的后綴名
                string Extension = Path.GetExtension(file.FileName);

                //重新命名文件
                newFileName = Guid.NewGuid().ToString() + Extension;

                //利用file.SaveAs保存圖片
                string name = Path.Combine(Server.MapPath("/Content/Upload/"), newFileName);
                file.SaveAs(name);
            }
            Thread.Sleep(1000);
            return "/Content/Upload/" + newFileName;
        }

 

jquery.uploadify.js 由於提示是英文的，所以改了onSelectError 代碼提示：

onSelectError : function(file, errorCode, errorMsg) {
            // Load the swfupload settings
            var settings = this.settings;

            // Run the default event handler
            if ($.inArray('onSelectError', settings.overrideEvents) < 0) {
                switch(errorCode) {
                    case SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED:
                        if (settings.queueSizeLimit > errorMsg) {
                            this.queueData.errorMsg = '\n選擇的文件數量超過了剩余的上傳限制(' + errorMsg + ')';
                        } else {
                            this.queueData.errorMsg = '\n選擇的文件數量超過了隊列的大小限制(' + settings.queueSizeLimit + ')';
                        }
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        this.queueData.errorMsg = '\n該文件"' + file.name + '"超過大小限制(' + settings.fileSizeLimit + ')';
                        break;
                    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
                        this.queueData.errorMsg = '\n該文件"' + file.name + '"是空的';
                        break;
                    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
                        this.queueData.errorMsg = '\n該文件"' + file.name + '"不接受的文件類型(' + settings.fileTypeDesc + ').';
                        break;
                }
            }
            if (errorCode != SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
                delete this.queueData.files[file.id];
            }

            // Call the user-defined event handler
            if (settings.onSelectError) settings.onSelectError.apply(this, arguments);
        },

 

 

后台代碼隨便寫的了，大家就湊合着看吧！

 

加上demo下載地址