layui时间，table,大图查看，弹出框，获取音频长度，文件上传

1.引入：
<link  href="../../Scripts/layui-v2.3.0/css/layui.css"  rel="stylesheet"  media="all"  />
<script  src="layui.js"  type="text/javascript"  charset="utf-8"></script>
layui.use(['table', 'laydate', 'layer', 'formSelects'], function () {
   var laydate = layui.laydate;

   //http://www.layui.com/demo/laydate.html
   //1.时间弹框
	laydate.render({
		elem: '#test1'
	});

	//http://www.layui.com/demo/table.html
	//2.table
	//渲染table
    var table = layui.table;
	var modelObj = {};
	var modelFieldsArray = $('#SearchCondition').serializeArray();
	$.each(modelFieldsArray, function () {
		modelObj[this.name] = this.value;
	});
	var modelStr = JSON.stringify(modelObj);

	var requestModel = {};
	requestModel.method = "GetBlogList";
	requestModel.modelstr = modelStr;

	table.render({
		elem: '#test'
		, url: '../../ServiceCenter/Handler/BlogHandler.ashx'
		, method: 'post'
		, where: requestModel
		, id: 'idTest'
		, page: {
			layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
			, limits: [10, 30, 50]
			, theme: '#FF5722'
			, first: '首页'
			, last: '尾页'
			, prev: '上一页'
			, next: '下一页'
		}
		, cols: [[
			//{ type: 'checkbox' },
			 { field: 'Id', title: 'ID', sort: true }
			, { field: 'UserId', title: '智驾号' }
			, { field: 'LikeCount', title: '点赞数量', sort: true }
			, { field: 'CommentCount', title: '评论数量', sort: true }
			, { field: 'TopNo', title: '置顶号' }
			, { field: 'BlogType', width: 135, title: '日志类型', sort: true }
			, { field: 'CategoryName', width: 135, title: '日志类别', sort: true }
			//, { field: 'text', title: '日志内容' }
			, { field: 'AddTime', width: 190, title: '发布时间', sort: true }
			, { toolbar: '#barDemo', width: 200, title: '操作' }
		]]
		, done: function (res, curr, count) {
			//$("[data-field='Id']").css('display', 'none');
		}

	})

	<table class="layui-hide" id="test" lay-filter="demo"></table>
	<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

	//3.监听工具条
	table.on('tool(demo)', function (obj) {//obj为记录对象
		if (obj.event === 'detail') {
			$.ajax({
				type: "Get",
				url: "../../ServiceCenter/Handler/BlogHandler.ashx",
				dataType: "json",
				data: { BlogId: obj.data.Id, method: "GetBlogById" },
				success: function (rep) {
					if (rep.code == 0) {

						//4.弹框http://layer.layui.com/
						layer.open({
							type: 1 //此处以iframe举例
							, title: '日志详细'
							, area: ['1000px', '600px']
							//, area: ['1000px']
							, shade: 0.3
							//, shadeClose: true
							, maxmin: true
							, content: $('#blogdetail')
							, cancel: function () {
								//右上角关闭回调
							}
							, success: function (layero, index) {
								$("#blogId").val(rep.data[0].Id);
								$("#blogUserId").html(rep.data[0].UserId);
								$("#blogblogStatus").html(rep.data[0].blogStatus);
								$("#blogLikeCount").html(rep.data[0].LikeCount);
								$("#blogCommentCount").html(rep.data[0].CommentCount);
								$("#blogTopNo").html(rep.data[0].TopNo);
								$("#blogBlogType").html(rep.data[0].BlogType);
								$("#blogCategoryName").html(rep.data[0].CategoryName);
								$("#blogAddTime").html(rep.data[0].AddTime);
								var contentObj = JSON.parse(rep.data[0].Content);
								$("#blogText").html(contentObj.text);
								if (contentObj.medias == undefined) {
									return;
								}
								if (contentObj.medias[0].type == 1) {
									var blogimgs = {
										list: contentObj.medias
									};
									$("#blogimgs").html(juicer($("#blogimgsTemplate").html(), blogimgs));
									$("#tr_imgs").css("display", "table-row");

									//http://layer.layui.com/
									//5.照片展示
									layer.photos({
										photos: '#blogimgs'
										, anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
									});
								}
								else {
									if (!(contentObj.medias[0].thumbnail == undefined)) {
										aliplayMng.aliPlayer._options.cover = contentObj.medias[0].thumbnail;
									}
									aliplayMng.aliPlayer._options.source = contentObj.medias[0].original;
									//aliplayMng.createAliPlayer(contentObj.medias[0].original);
									$("#tr_video").css("display", "table-row");
								}
							}
							, btn: ['关闭'] //
							, yes: function (index) {
								var tmpindex = layer.index;
								layer.close(index);

								$("#tr_imgs").css("display", "none");
								$("#tr_video").css("display", "none");
							}
						});
					}
					else {
						console.log(rep.code + ":" + rep.msg);
					}

				}
			});

		}
	});

	<div class="" id="blogimgs">
		<!--<img layer-src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1670661812,826118626&fm=27&gp=0.jpg" src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1530671829407">-->
	</div>

	//6.文件上传： layui.use(['jquery', 'layer', 'upload', 'formSelects'], function () {
	//http://www.layui.com/demo/upload.html
	var $ = layui.$;
    var upload = layui.upload;

	var uploadInst = upload.render({
		elem: '#' + uploadBtnId
		, url: '../../ServiceCenter/Handler/UploadHandler.ashx'
		, data: requestModel
		, accept: acceptFileType || 'file'
		, before: function (obj) {
			//预读本地文件示例，不支持ie8
			obj.preview(function (index, file, result) {
				$('#' + showImgId).attr('src', result); //图片链接（base64）
				if (isMusic) {
					musicApp.commonKit.upLoadMng.upLoadMusicCompleted = false;
					var myVid = $('#' + showImgId)[0];

					//获取音频时间
					if (myVid != null) {
						var duration;
						myVid.load();
						myVid.oncanplay = function () {
							console.log("myVid.duration", myVid.duration);
							beforecallback(myVid.duration);
						}
					}
				}
				else {
					musicApp.commonKit.upLoadMng.upLoadCompleted = false;
				}
			});

		}
		, done: function (res) {
			//console.log(res.data.fileUrl);
			if (isMusic)
			{
				musicApp.commonKit.upLoadMng.upLoadMusicCompleted = true;
			}
			else {
				musicApp.commonKit.upLoadMng.upLoadCompleted = true;
			}
			aftercallback(res.data.fileUrl);
		}
		, error: function () {
			musicApp.commonKit.upLoadMng.upLoadCompleted = false;
			console.log("上传失败！");
		}
	});

	<button type="button" class="layui-btn" id="uploadMudicCategoryImgBtn">上传图片</button>
	<div class="layui-upload-list">
		<img id="musicCategoryImg" class="layui-upload-img musicItemImg">
		<input id="musicCategoryImgUrl" type="text" name="ImgUrl" lay-verify="title" value="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1670661812,826118626&fm=27&gp=0.jpg" autocomplete="off" placeholder="" class="layui-input displayNone">
	</div>

	public void ProcessRequest(HttpContext context)
	{
		context.Response.ContentType = "application/json";
		string method = context.Request.Params["method"];
		switch (method)
		{
			case "UploadFile":
				this.UploadFile(context);
				break;
			default:
				break;
		}

		context.Response.End();
	}

	private void UploadFile(HttpContext context)
	{
		var httpRequest = context.Request;
		var identity = GetSTSInfo();
		if (identity != null)
		{
			var identitySTS = new
			{
				AccessKeyId = identity.AccessKeyId,
				AccessKeySecret = identity.AccessKeySecret,
				AccessSecurityToken = identity.AccessSecurityToken,
				Expire = identity.Expire,
				Endpoint = identity.Endpoint,
				Bucket = identity.Bucket,
				FileUrl = identity.FilePath
			};
			var client = new OssClient(identity.Endpoint, identity.AccessKeyId, identity.AccessKeySecret, identity.AccessSecurityToken);
			if (httpRequest.Files.Count > 0)
			{
				try
				{
					string url = string.Empty;
					var postedFile = httpRequest.Files[httpRequest.Files.AllKeys[0]];

					Stream imageStream = postedFile.InputStream;//建立流对象
					var type = Path.GetExtension(postedFile.FileName);//取得文件扩展名
					var key = identity.FilePath + "/" + Guid.NewGuid() + type;
					client.PutObject(identity.Bucket, key, imageStream);
					var fileUrl = new
					{
						fileUrl = "http://" + identity.Bucket + "." + identity.Endpoint + "/" + key
					};
					var result = new { code = 0, msg = "上传文件到OSS成功:", data = fileUrl };
					HttpContext.Current.Response.Write(JsonConvert.SerializeObject(result));
				}
				catch (Exception ex)
				{
					LogWriter.ToError("上传文件到OSS失败");
					var result = new { code = -1, msg = "上传文件到OSS失败:" + ex.Message, data = "" };
					HttpContext.Current.Response.Write(JsonConvert.SerializeObject(result));
				}
			}
		}
		else
		{
			LogWriter.ToError("获取STS服务失败");
			var result = new { code = -1, msg = "获取STS失败", data = "" };
			HttpContext.Current.Response.Write(JsonConvert.SerializeObject(result));
		}
	}
})