//按钮
<div class="layui-form-item">
<label class="layui-form-label">上传书籍</label>
<div class="layui-input-inline">
<button style="float: left;" type="button" class="layui-btn layui-btn-warm" id="layuiadmin-upload-book-list">点击上传书籍</button>
</div>
<div id="preview" class="layui-input-inline">
<button class="layui-btn layui-btn-radius layui-btn-normal" layadmin-event="preview">预览</button>
</div>
</div>
//js 上传
upload.render({
elem: '#layuiadmin-upload-book-list'
, url: '接口地址'
, accept: 'file'
, field: 'file'//后台接收参数名
, acceptMime: 'text/plain'
,before: function(obj){ //obj参数包含的信息,跟 choose回调完全一致,可参见上文。
layer.load(); //上传loading
}
, done: function (res) {
layer.closeAll('loading'); //关闭loading
if(res.data.bookId == ""){
layer.msg("上传失败,请检查txt重新上传", {icon: 5});
}else {
$("#bookId_add").val(res.data.bookId)
$("#preview").show()
}
}
,error: function(index, upload){
layer.closeAll('loading'); //关闭loading
layer.msg("上传失败,请检查txt重新上传", {icon: 5});
}
});
//上传预览 js
//书籍上传预览
admin.events.preview = function (othis) {
admin.popup({
title: '预览'
,area: ['900px', '680px']
,id: 'LAY-popup-add'
,success: function(layero, index){
view(this.id).render('books/preview').done(function(){ //指定页面
form.render(null, 'layuiadmin-form-page');
$("#bookId_preview").val($("#bookId_add").val())
});
}
});
};
//预览页面
<div class="modal-body">
<div class="row">
<ul id="chapterLi" style="height:500px; width:200px;float:left; overflow:auto;">
</ul>
<div style="border: 1px solid #e4e4e4;height: 500px; overflow:auto; width:550px;float:left;line-height: 20px" id ="tempContent">
<p></p>
</div>
</div>
//请求 内容数据
//章节编号
admin.req({
url :"接口地址“
,success: function(res){
var html ='';
var list = res.data.catalogs;
if(list.length>0) {
for (var i = 0; i < list.length; i++) {
html +='<li onclick="getTempContent('+list[i].order+')">'+"第"+list[i].order+'章 '+list[i].catalog+'</li>';
// html +='<li>'+"第"+list[i].order+'章 '+list[i].catalog+'</li>';
}
}
$("#chapterLi").html(html);
}
})
//根据编号获取内容
window.getTempContent=function (order) {
$("#tempContent").html("");
var url ="接口地址";
$.get(url,{
bookId: $("#bookId_add").val(),
order:order
},function(data2){
var html ='';
var tempContent = data2.data.tempBook;
html +='<p>'+tempContent.content+'</p>';
$("#tempContent").html(html);
});
}