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', 135, title: '日志类型', sort: true }
, { field: 'CategoryName', 135, title: '日志类别', sort: true }
//, { field: 'text', title: '日志内容' }
, { field: 'AddTime', 190, title: '发布时间', sort: true }
, { toolbar: '#barDemo', 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));
}
}
})