登录  /  注册
博主信息
博文 5
粉丝 0
评论 2
访问量 23589
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于layer.open页面上传文件的无法点击的问题
郑小飒的博客
原创
3914人浏览过

有没有小伙伴用layer open 是发现无法点击上传按钮的问题,其实这个问题很容易解决,首先在layer.open()里面写一个success属性,然后再success里面写一个回调方法。回调里面加上render.form()先进行表单渲染,然后再加上 upload.render();
           var uploadInst = upload.render({
               elem: '#upload_btn', //绑定元素
               accept: 'images', //允许上传的文件类型
               multiple: true, //允许多文件上传
               auto: false, //选完文件后不要自动上传
               bindAction: '.layui-layer-btn0', //指定一个按钮触发上传
               number:3,
               url: ctx + '/warehouseProblemController/uploadPic.html', //上传接口
               choose: function(obj){
                   var files = obj.pushFile(); //将每次选择的文件追加到文件队列
                   //图像预览,如果是多文件,会逐个添加。(不支持ie8/9)
                   obj.preview(function(index, file, result){
                       var imgobj = new Image(); //创建新img对象
                       imgobj.src = result; //指定数据源
                       imgobj.className = 'ml_img';
                       document.getElementById("div_prev").appendChild(imgobj); //添加到预览区域
                   });
               }

先对上传时间进行渲染,然后就可以进行点击上传文件,提交表单数据了。

下面是效果:123.png

下面是部分代码:

// 监听数据表格头部按钮
table.on('toolbar(*)', function (obj) {
   var checkStatus = table.checkStatus(obj.config.id);
   switch (obj.event) {
       case 'reload':
           table.init('*', obj.config);
           break;
       // 添加新数据
       case 'add':
           /* 再弹出添加界面 */
           layer.open({
               type:1,
               title:"添加题库习题",
               shade:false,
               skin:"myclass",
               area:["50%"],
               content:'<div class="layui-form">\n' +
                   '    <form class="layui-form form-container" action="{:url(\'admin/astro_exam/addType\')}" method="post">\n' +
                   '        <div class="layui-form-item">\n' +
                   '            <label class="layui-form-label">分类名称</label>\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <input type="text" name="name" value="" lay-verify="required" placeholder="请输入名称" class="layui-input">\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '\n' +
                   '        <div class="layui-form-item">\n' +
                   '            <label class="layui-form-label">测评时长</label>\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <input type="text" name="time" value="" lay-verify="required" placeholder="请输入测评时长" class="layui-input">\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '\n' +
                   '        <div class="layui-form-item">\n' +
                   '            <label class="layui-form-label">测评题数</label>\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <input type="text" name="num" value="" lay-verify="required" placeholder="请输入测评题数" class="layui-input">\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '\n' +
                   '        <div class="layui-form-item">\n' +
                   '            <label class="layui-form-label">测评分类配图</label>\n' +
                   '            <div class="layui-input-block layui-upload-list">\n' +
                   '                <img class="layui-upload-img" id="title_img" src="" alt="测评分类配图" style="width: 100px;height: 100px;">\n' +
                   '            </div>\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <br/>\n' +
                   '                <input type="text" name="img" value="" class="layui-input layui-input-inline" id="thumb">\n' +
                   '                <button type="button" class="layui-btn upload-btn-whole">\n' +
                   '                    <i class="layui-icon">&#xe67c;</i>上传图片\n' +
                   '                </button>\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '\n' +
                   '        <div class="layui-form-item layui-form-text">\n' +
                   '            <label class="layui-form-label">描述</label>\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '\n' +
                   '        <div class="layui-form-item">\n' +
                   '            <div class="layui-input-block">\n' +
                   '                <button class="layui-btn" lay-submit lay-filter="*">保存</button>\n' +
                   '                <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
                   '            </div>\n' +
                   '        </div>\n' +
                   '    </form>\n' +
                   '</div>',
               success:function(){
                   form.render();
                   upload.render({
                       elem: '.upload-btn-whole', //绑定元素
                       url: '/api/upload/upload', //上传接口
                       drag: true,
                       done: function (data) {
                           //上传完毕回调
                           if (data.error === 0) {
                               // layer.msg(data.url);
                               document.getElementById('thumb').value = data.url;
                               if (document.getElementById('title_img')) document.getElementById('title_img').src = data.url;
                           } else {
                               layer.msg(data.message);
                           }
                       }
                       , error: function () {
                           //请求异常回调
                           layer.msg(data.message);
                       }
                   });
               }
           });

           /* 渲染表单 */
           form.render();
           break;
       default:
           console.log(obj.event);
           break;
   }
});

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
1条评论
郑小飒 2019-04-29 20:08:28
哈哈哈哈哈
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学