mvc實現上傳視頻預覽 - guoke360－IT工程師數位筆記本

文章出處

上個項目中用到了上傳視頻，本來打算用百度的webuploader做的，但是webuploader可能有個毛病就是不能上傳太大的東西。

于是乎，只能換個方法做了啊，看了半天最終決定用傳統的uploaderfile來做。順便吐槽下uploaderfile真的是，和webuploader相比完全是有點復雜啊

OK回到正題，這個uploaderfile最為重要的個人感覺就是引用--一般情況下要注意引用的順序，要先引用jq.min而且是只能引用一次，不然就會報錯，筆者之前用的模板就有一個引用，然后又引用了一次也是非常的吃癟啊。

要想成功的使用webuploaderfile需要引用4個東西算上jq需要有5個

引用成功后到下一步就是網頁的布局問題--需要一些布局

<tr id="aa1">
            <td>
                上傳視頻
            </td>
            <td>
                <div style="margin-top:20px;text-align:left;">
                    <span>請上傳：</span>
                    <span style='color:blue;'>(只支持,'mp4')</span>
                </div>
                <div style="margin-top:10px;">
                    <form action="" name="" enctype="multipart/form-data">
                        <input id="upload" type="file" name="files" class="upinput" param1="xxx" />
                    </form>
                </div>
                <div id="progress" style="width:200px;margin-bottom:10px;">
                    進度條:<div class="bar" style="width: 0%;"></div>
                </div>
                <!-- 預覽框： -->
                <div class="preview"></div>


            </td>

        </tr>

由于這個項目筆者沒有怎么用心，所以命名什么都比較隨意了一些
OK接下來就是在Js中實例化代碼了

<script type="text/javascript">
        $("#upload").fileupload({
            autoUpload: true,

            type: 'post',

            url: "@Url.Action("UploadVideo")",//文件上傳地址，當然也可以直接寫在input的data-url屬性內

            dataType: "json", //如果不指定json類型，則傳來的json字符串就需要解析jQuery.parseJSON(data.result);

            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },

            done: function (e, data) {
                //done方法就是上傳完畢的回調函數，其他回調函數可以自行查看api
                //注意data要和jquery的ajax的data參數區分，這個對象包含了整個請求信息
                //返回的數據在data.result中，這里dataType中設置的返回的數據類型為json
                if (data.result.sta) {
                    // 上傳成功：
                    $(".preview").html("<video width='640' id='video111' height='360' src=" + data.result.previewSrc +
                        " id='player1'controls='controls' preload='none'></video> ");
                } else {
                    // 上傳失敗：
                    alert(data.result.msg);
                }

            }
        });
</script>

這里面我做了一些限制和后來上傳成功后能夠成功的插入一段新的視屏代碼

再次順便提一下筆者的視屏控件屬于html5自帶的video控件，筆者完成項目的時候老師要求的是使用flash插件來使用，對于此筆者表示不解和無趣。flash播放視頻的時候筆者認為很快就會結束了，于是直接使用了html5的方式

完成前臺的這些設計后就是后臺控制器中的判斷上傳視頻的問題了

   [HttpPost]
        public ActionResult UploadVideo(HttpPostedFileBase files=null)
        {
            if (files != null && files.ContentLength > 0)
            {
                string folderpath = "/UploadFile/Video/";
                if (!Directory.Exists(folderpath))
                {
                    Directory.CreateDirectory(Server.MapPath(folderpath));
                }
                string ext1 = Path.GetExtension(files.FileName);
                if (ext1 != ".mp4" && ext1 != ".wmv" && ext1 != ".mpeg" && ext1 != ".avi" && ext1 != ".mp3" && ext1 != ".wav" && ext1 != ".wma" && ext1 != ".rmvb")
                {
                    return Json(new { sta = false, msg = "文件格式不正確！" });
                }
                else
                {
                    string name = DateTime.Now.ToString("yyyyMMddHHmmssff");
                    string ext = Path.GetExtension(files.FileName);
                    string downpath = folderpath + name + ext;
                    string filepath = Server.MapPath(folderpath) + name + ext;
                    files.SaveAs(filepath);
                    return Json(new { sta = true, previewSrc = downpath, id = name });
                }
            }
            else
            {
                return Json(new { sta = false, msg = "請上傳文件！" });
            }
        }