mvc5 + ef6 + autofac搭建項目（四）

在列表頁面，點擊新增，彈出窗口實現視屏上傳，這里存在一個問題，就是大文件上傳的問題，iis出於安全問題，有限制，當然這不是大問題，解決也很容易：

見截圖：

請忽略視屏文件，看得懂的請裝作不懂。

源碼

@{
    ViewBag.Title = "發布新視頻";
    Layout = "~/Views/Shared/_LayoutDialogContext.cshtml";
}


<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
        <div class="well with-header">
            <div class="header bordered-sky">發布視頻</div>

            <div class="row">
                <div id="toolbar" style="padding-left: 5px">
                    <div class="buttons-preview">
                        <form id="uploadForm" action="" method="post" enctype="multipart/form-data">
                            <div class="">
                                <div class="input-group">
                                    <span class="input-group-addon ">視頻名稱</span>
                                    <input type="text" class="form-control txt-video-title" name="videoTitle" placeholder="輸入視頻名稱" />
                                    <span class="input-group-addon ">視頻分類</span>
                                    <span class="table-cell">@Html.DropDownList("VideoCategoryList", null, new { @class = "drop" })</span>
                                    
                                    <span class="table-cell">
                                        <input type="checkbox" value="-1" id="chkToTop" name="chkToTop" />置頂</span>


                                        <a href="javascript:void(0);" style="display: table-cell;" class="btn btn-azure btn-publish"><i class="fa fa-plus"></i> 發布</a>
</div>
                                <div class="tabbable">
                                    <ul class="nav nav-tabs" id="myTab">
                                        <li class="tab-red active">
                                            <a data-toggle="tab" href="#videoInfo">
                                                上傳視頻
                                            </a>
                                        </li>
                                        @*<li class="tab-red">
                                                <a data-toggle="tab" href="#picture">
                                                    上傳圖片
                                                </a>
                                            </li>*@

                                        <li class="">
                                            <a data-toggle="tab" href="#baseInfo">
                                                視頻簡介
                                            </a>
                                        </li>

                                    </ul>

                                    <div class="tab-content">
                                        <div id="videoInfo" class="tab-pane active">
                                            <p>
                                                <input id="inputVideo" name="inputVideo" data-min-file-count="1" type="file" class="file file-loading" data-allowed-file-extensions='["MP4", "FLV"]'>
                                            </p>
                                        </div>
                                        @*<div id="picture" class="tab-pane">
                                                <p>
                                                    <input id="inputPicture" name="inputPicture" multiple data-min-file-count="3" type="file" class="file file-loading" data-allowed-file-extensions='["jpg", "jpeg","png","gif","bmp"]'>
                                                </p>

                                            </div>*@
                                        <div id="baseInfo" class="tab-pane ">
                                            <textarea rows="8" style="width:100%" id="videoDesc" name="videoDesc"></textarea>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>


<style>
    .input-group {
        margin-bottom: 5px;
    }

    #thelist {
        font-size: 10px;
    }

    .table-cell {
        display: table-cell;
        vertical-align: top;
    }

    .drop {
        height: 34px;
    }
</style>

<link href="~/Scripts/js/bootstrap/fileupload/css/fileinput.css" rel="stylesheet" />
<script src="~/Scripts/js/bootstrap/fileupload/js/fileinput.js"></script>
<script src="~/Scripts/js/bootstrap/fileupload/js/fileinput_locale_zh.js"></script>



<script type="text/javascript">

    $(function () {

        $("#inputVideo").fileinput({
            //uploadUrl: '#', // you must set a valid URL here else you will get an error
            //allowedFileExtensions: ['jpg', 'png', 'gif'],
            overwriteInitial: false,
            maxFileSize: 3000,
            maxFilesNum: 1,
            //allowedFileTypes: ['image', 'video', 'flash'],
            slugCallback: function (filename) {
                return filename.replace('(', '_').replace(']', '_');
            }
        });

        //高寬屬性社會資
        resize();
        $(window).resize(function () {
            resize();
        });


        initialUploadBase();
        submitFile();

    });
    function resize() {
        var height = $('.bootstrap-dialog').parent('body').height();
        var width = $('.bootstrap-dialog').parent('body').width();
        if (width > 500)
            width = width - 250
        $('.modal-dialog').css({ "width": width });
        $('.modal-dialog .modal-content').css({ "height": height - 120 });
    }

    ///初始化圖片上傳（樣式）
    function initialUploadBase() {
        //圖片上傳
        $('#inputPicture').fileinput({
            language: 'zh',//語言設置
            uploadUrl: '',//上傳路徑
            allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],//接收的文件后綴
            showUpload: false, //是否顯示上傳按鈕
            showCaption: false,//是否顯示標題
            browseClass: "btn btn-primary", //按鈕樣式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"

        });

        //視頻上傳
        $('#inputPicture').fileinput({
            language: 'zh',//語言設置
            uploadUrl: '',//上傳路徑
            allowedFileExtensions: ['MP4', 'flv'],//接收的文件后綴
            showUpload: false, //是否顯示上傳按鈕
            showCaption: false,//是否顯示標題
            browseClass: "btn btn-primary", //按鈕樣式
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>"

        });
    }
    //提交文件
    function submitFile() {
        $('.btn-publish').click(function () {
            //var title = $('.txt-video-title').val();
            var uploadFormData = new FormData($('#uploadForm')[0]);//序列化表單，$("form").serialize()只能序列化數據，不能序列化文件
            $.ajax({
                type: 'POST',
                data: uploadFormData,
                url: '/Video/UpLoad',//TypeError: 'append' called on an object that does not implement interface FormData.
                processData: false,
                contentType: false,
                async: false,
                success: function (data) {
                    if (typeof (data) == undefined) {
                        alert("用戶信息已丟失，請重新登錄！"); window.parent().location.href = "/Account/Login";
                    }
                    if (data.ErrorMsg == "") {
                        alert('上傳成功！');
                    }
                }
            });

        });
    }



</script>

 

1.bt3的彈窗，實現也很簡單，在上一篇（三）中，第一段代碼中有一段  showBigDialog('/Video/Insert', '新增視頻');，實現 見代碼：

var showBigDialog = function (remoteRoute, title) {
    BootstrapDialog.show({
        title: title,
        message: function (dialog) {
            var $message = $('<div></div>');
            var pageToLoad = dialog.getData('pageToLoad');
            $message.load(pageToLoad);
            return $message;
        }, draggable: true,
        data: {
            'pageToLoad': remoteRoute
        }
    });

這里當初實現（搞好久了，記不太清楚了，今天鬧情緒，才拿出來貼貼）有一個問題，就是如何才彈出層中加載另外一視圖的問題：中個問題問得好啊，但是很傻，因為上面已經寫的很明了，那么另一個問題來了，加載的另一個視圖，怎么自適應大小呢？

直接寫死了？尼瑪，這怎么可能？換一個顯示頻是不是就擠壞了？不得不說，這個問題問得也很有技術含量，但是，上面也實現了，當然，需要在屏幕變化之后，重新刷新彈窗，如果是 自適應顯示頻的兼容處理，那么，該處未實現。

不得不說，bt3的拆件的確很猛，支持圖片的上傳預覽，視頻的預覽和播放

上傳實現代碼：

/// <summary>
        ///     上傳新視頻，（包含文件上傳）
        /// </summary>
        /// <returns></returns>
        public JsonResult UpLoad()
        {
            if (null != Session[Consts.SYSTEMUERSESSION])
            {
                string videoName = Request["videoTitle"];//視頻標題
                string videoDesc = Request["videoDesc"];//視頻簡介
                string chkToTop = Request["chkToTop"];//是否置頂

                string videoPictureUrl = "";
                string videoInfoUrl = "";//視頻上傳之后的虛擬路徑
                string videoCategoryKey = Request["VideoCategoryList"];//視頻分類外鍵ID



                FileUpLoadResult fileUpLoadVideo = null;//用於輸出結果

                #region 視頻上傳，生成默認展示圖片（自動剪切）
                try
                {
                    string fileSavePath = DateTime.Now.ToString("yyyyMMdd");//當天時間最為文件夾
                    string fileName = DateTime.Now.ToString("yyyyMMddHHmmssfff");//生成的文件名稱

                    string videoPath = Consts.VIDEOINFOSAVEPATH + fileSavePath + "/";
                    string gengeratedPicPath = Consts.VIDEOPICTURESAVEPATH + fileSavePath + "/";
                    Thread.Sleep(100);
                    fileUpLoadVideo = Request.UpLoad(videoPath, 0, gengeratedPicPath, fileName, "480x360");
                }
                catch (Exception ex)
                {
                    fileUpLoadVideo = new FileUpLoadResult()
                    {
                        Status = false,
                        FileSavePath = null,
                        ErrorMsg = ex.Message
                    };
                }
                #endregion
                #region 裝箱、入庫
                if (fileUpLoadVideo.FileSavePath != null)
                {
                    ColumnVideo video = new ColumnVideo()
                    {
                        Id = CombHelper.NewComb(),
                        VideoName = videoName,
                        VideoDesc = videoDesc,
                        ShowPictureUrl = fileUpLoadVideo.ShowImagePath,//顯示圖片文件路徑
                        VideoUrl = fileUpLoadVideo.FileSavePath.FirstOrDefault(),
                        IsEnabled = true,
                        VideoFrom = "原創",
                        VideoSize = 0,
                        VideoLength = 0,
                        ViewTimes = 888,
                        GoodClickTimes = 888,
                        BadClickTimes = 10,
                        AddDate = DateTime.Now,
                        FavoriteTimes = 888,
                        ToTop = string.IsNullOrEmpty(chkToTop) ? 0 : int.Parse(chkToTop),
                        CustomerKey = ((Customer)Session[Consts.SYSTEMUERSESSION]).Id,
                        ColumnsCategoryKey = new Guid(videoCategoryKey)
                    };
                    if (_videoService.Insert(video))
                    {
                        fileUpLoadVideo = new FileUpLoadResult()
                        {
                            Status = true,
                            FileSavePath = new string[] { videoPictureUrl, videoInfoUrl },
                            ErrorMsg = ""
                        };
                    }
                }
                #endregion

                return Json(fileUpLoadVideo, JsonRequestBehavior.AllowGet);
            }
            return null;
        }

上傳注意點：關於文件過大問題，測試過程中發現，超過32M的文件一上傳就陽痿，這尼瑪不是蛋疼么，怎么就萎了呢，不怕不怕，這么擼一把就好了：

 <system.web>
    <!--配置緩存-->
    .............
    <!--配置緩存-->
    <compilation debug="true" targetFramework="4.5.2" />
    
    <httpRuntime targetFramework="4.5.2" maxRequestLength="104857600" executionTimeout="36000" delayNotificationTimeout="36000" requestValidationMode="2.0"/>
    .........

這樣一搞一下，100M以上的文件上傳也是秒射的，