06.LoT.UI 先後臺通用框架分解系列之——浮誇的圖片上傳

LOT.UI分解系列彙總：http://www.cnblogs.com/dunitian/p/4822808.html#lotui

LoT.UI開源地址以下：https://github.com/dunitian/LoTCodeBase/tree/master/LoTUI

先看在LoT.UI裏面的應用效果圖：

懶人福利：http://www.cnblogs.com/dunitian/p/5535455.html（一句代碼直接實現）

關鍵代碼解析：（https://github.com/dunitian/LoTCodeBase/tree/master/NetCode/3.經常使用技能/02.uploader系列/01.Webuploader）

JS部分：

<script type="text/javascript">
        //1.uploader初始化。 auto-是否自動上傳
        var uploader = WebUploader.create({
            server: '/Home/Upload',
            swf: '/open/webuploader/Uploader.swf',
            pick: '#lot-picker',
            auto: true,                     //自動上傳
            //chunked: true,                //斷點續傳-單個默認5M
            duplicate: false,               //文件去重
            prepareNextFile: true,          //提早準備下一個文件（可選，單文件不建議開）
            //formData: { },                //自定義參數表，每次請求都會發送這些參數
            paste: document.body,           //啓動剪貼板（可選）
            dnd: $('#lot-uploader'),        //啓動拖拽（可選）
            fileNumLimit: 5,                //文件總數量
            fileSingleSizeLimit: 10485760,  //單個文件最大值（IIS默認<=4M,可自行設置：httpRuntime的maxRequestLength）
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });

        //2.文件添加時，添加樣式和縮略圖
        uploader.on('fileQueued', function (file) {
            var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail">' +
                        '<img>' +
                        '<div class="info info-top">Szie：' + Math.floor(file.size / 1024) + 'kb' + '</div>' +
                        '<div class="info info-bot">' + file.name + '</div>' +
                    '</div>'
                    ),
                $img = $li.find('img');
            $('#lot-filelist').append($li);
            // 建立縮略圖
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能預覽</span>');
                    return;
                }
                $img.attr('src', src);
            }, 100, 100);
            ////計算文件MD5（可加）
            //uploader.md5File(file).then(function (val) {
            //    console.log('md5:',val,'-',file.name);
            //});
        });

        //3.文件上傳過程當中建立進度條實時顯示。
        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 + '%');
        });

        //4.文件上傳成功，給item添加成功class, 用樣式標記上傳成功。
        uploader.on('uploadSuccess', function (file, data) {
            if (data.status) {
                $('#' + file.id).addClass('upload-state-done');
            } else {
                showMsg(file, data.msg);
            }
        });

        //5.失敗系列的處理
        //5.1添加失敗處理
        uploader.on('error', function (log) {
            switch (log) {
                case 'F_EXCEED_SIZE':
                    addMsg('文件10M之內'); break;
                case 'Q_EXCEED_NUM_LIMIT':
                    addMsg('已超最大上傳數'); break;
                case 'Q_TYPE_DENIED':
                    addMsg('文件類型不正確'); break;
                case 'F_DUPLICATE':
                    addMsg('文件已經被添加'); break;
                default:
                    addMsg('文件添加失敗~'); break;
            }
        });
        //5.2上傳失敗處理
        uploader.on('uploadError', function (file) {
            showMsg(file, '上傳失敗');
        });

        //錯誤信息顯示
        function showMsg(file, msg) {
            var $li = $('#' + file.id), $error = $li.find('div.error');
            //避免重複建立
            if (!$error.length) {
                $error = $('<div class="error"></div>').appendTo($li);
            }
            $error.text(msg);
        }
        //錯誤信息提示
        function addMsg(msg) {
            $('#lot-uploader').prepend('<h3 class="temp-log" style="color:red;">' + msg + '</h3>')
            setTimeout(function () {
                $('.temp-log').remove();
            }, 2000);
        }
    </script>

後端代碼：

/// <summary>
        /// 圖片上傳
        /// </summary>
        /// <returns></returns>
        public JsonResult Upload(HttpPostedFileBase file)
        {
            if (file == null) { return Json(new { status = false, msg = "圖片提交失敗" }); }
            if (file.ContentLength > 10485760) { return Json(new { status = false, msg = "文件10M之內" }); }
            string filterStr = ".gif,.jpg,.jpeg,.bmp,.png";
            string fileExt = Path.GetExtension(file.FileName).ToLower();
            if (!filterStr.Contains(fileExt)) { return Json(new { status = false, msg = "圖片格式不對" }); }
            //防止黑客惡意繞過，從根本上判斷下文件後綴
            if (!file.InputStream.CheckingExt())
            {
                //todo：一次危險記錄
                return Json(new { status = false, msg = "圖片格式不對" });
            }
            //todo: md5判斷一下文件是否已經上傳過,若是已經上傳直接返回 return Json(new { status = true, msg = sqlPath });

            string path = string.Format("{0}/{1}", "/lotFiles", DateTime.Now.ToString("yyyy-MM-dd"));
            string fileName = string.Format("{0}{1}", Guid.NewGuid().ToString("N"), fileExt);
            string sqlPath = string.Format("{0}/{1}", path, fileName);
            string dirPath = Request.MapPath(path);

            if (!Directory.Exists(dirPath)) { Directory.CreateDirectory(dirPath); }
            try
            {
                //todo：縮略圖
                file.SaveAs(Path.Combine(dirPath, fileName));
                //todo: 將來寫存數據庫的Code
            }
            catch { return Json(new { status = false, msg = "圖片保存失敗" }); }
            return Json(new { status = true, msg = sqlPath });
        }

開源組件：https://github.com/fex-team/webuploader

擴展組件：https://github.com/dunitian/LoTUploader