layui 上传文本(小说:加 预览功能)

//按钮

 <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>&nbsp;
                            </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);

            });
        }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值