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="" executionTimeout="" delayNotificationTimeout="" requestValidationMode="2.0"/>
.........
这样一搞一下,100M以上的文件上传也是秒射的,
mvc5 + ef6 + autofac搭建项目(四)的更多相关文章
- mvc5 + ef6 + autofac搭建项目(四).1视屏上传生成截图
即上一篇中上传涉及到的 一个视频生成截图的问题,这个很简单,这是上一篇中的代码片段 #region 视频上传,生成默认展示图片(自动剪切) try { string fileSavePath = Da ...
- mvc5 + ef6 + autofac搭建项目(三)
前面已经基本完成了框架的搭建,后面就是实现了,后面主要说下前端的东西bootstrap的使用和相关插件. 看图: 实现比较简单,在主页面只引入共用部分的 js等相关包,毕竟不是所有页面都需要列表以及其 ...
- mvc5 + ef6 + autofac搭建项目(repository+uow)(一)
直奔主题了,不那么啰嗦. 整体框架的参考来源是 O# 的框架,在此感谢锋哥一直以来的开源,让我们有的学 如下图: (图一) 一下分三个步骤说明,分别为 dbContext,repository,uo ...
- mvc5 + ef6 + autofac搭建项目(repository+uow)(二)
续上篇: DBContext 在上篇 图一类库根目录创建的 DbContextBase /// <summary> /// 数据库上下文基类 /// </summary> // ...
- MVC5+EF6 入门完整教程四
上篇文章主要讲了如何配置EF, 我们回顾下主要过程: 创建Data Model à 创建Database Context à创建databaseInitializerà配置entityFramewor ...
- 【第四篇】ASP.NET MVC快速入门之完整示例(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- MVC5+EF6 完整教程
随笔分类 - MVC ASP.NET MVC MVC5+EF6 完整教程17--升级到EFCore2.0 摘要: EF Core 2.0上周已经发布了,我们也升级到core 文章内容基于vs2017, ...
- 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
- 【第一篇】ASP.NET MVC快速入门之数据库操作(MVC5+EF6)
目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...
随机推荐
- 【转】基于Ubuntu 14.04 LTS编译Android4.4.2源代码
原文网址:http://blog.csdn.net/gobitan/article/details/24367439 基于Ubuntu 14.04 LTS编译Android4.4.2源代码 ...
- jquery方法详解--bind(type, [data], fn)
转自:http://www.zhufengpeixun.cn/jquery/bind_type_data_fn.html bind(type, [data], fn) 返回值::jQuery 概述 ...
- Unity 官方 Demo: 2DPlatformer 的 SLua 版本。
9月份时,趁着国庆阅兵的假期,将 Unity 官方 Demo: 2DPlatformer 移植了一个 SLua 版本,并放在了我的 GitHub 账号下:https://github.com/yauk ...
- JS实现表单输入Enter键转换焦点框
<form> <input type="text" onkeypress="return handleEnter(this, event)"& ...
- 30种mysql优化sql语句查询的方法
1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索 ...
- 【Hibernate】--实体状体与主键生成策略
一.Hibernate三种状态 (1).瞬时状态(只存在Hibernate容器中,数据库中没有与之对应的记录) A.通过new实例化的实体,在没有执行save方法时. B.持久状态调用delete方法 ...
- Spring Aop重要概念介绍及应用实例结合分析
转自:http://bbs.csdn.net/topics/390811099 此前对于AOP的使用仅限于声明式事务,除此之外在实际开发中也没有遇到过与之相关的问题.最近项目中遇到了以下几点需求,仔细 ...
- Android.mk 的含义
LOCAL_PATH:=$(call my-dir) LOCAL_PATH是定义源文件在哪个目录用的. my-dir 是个定义的宏方法, $(call my-dir)就是调用这个叫 my-dir的宏方 ...
- 安装MYSQL 出现Error 1045 access denied 的解决方法
操作系统:WINDOWS10 系统 数据库版本:mysql 5.x 提示:access denied for user 'root'@'localhost' using password yes/no ...
- Activiti5.16.4数据库表结构
一.ACTIVITI 数据库E-R图(5.16.4) Activiti 5.16.4 总共有24张表,增加act_evt_log(事件日志),以及增加了对SasS的支持. 在流程定义.运行实例和历史的 ...