在列表页面，点击新增，弹出窗口实现视屏上传，这里存在一个问题，就是大文件上传的问题，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>