layui-col-md-offset1 第二次上传无法上传

layui-col-md-offset1 第一次上传文件正常,第二次上传文件,没有触发调用接口的问题

开始的时候,使用的是动态生成的,的 html 页面,这样在第一上传的时候是没有问题,但是将页面关闭后,第二次上传的时候,会导致能够正常的选择文件,但是无法进行接口和方法的触发,导致文件无法上传到服务器。 

 

html 代码

<div id="xiaoming" style="disply: none">
    <div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">
        <div style="margin-top: 15%">
              <i class="layui-icon">$#xe67c;</i>
              <p>点击上传,或将文件拖拽到此处</p>
        </div>
    </div>
</div>

js 代码

var index1 = layer.open({
    type: 1,
    titile: '文件上传',
    content: ${'#xiaoming'},
    area: ['50%', '70%'],
    closeBtn: 1,
    btn: ['关闭'],
    btnAlign: 'c',
    yes: function () {
        layer.close(index1);
    },
    success: function () {
        uploadFile(currentRow);
    }
});
 function uploadFile(currentRow) {
    //
     upload.render({
         elem: '#shangchuan',
         url: '/*/*/*',
         data: {"id": currentRow.id},
         accept: ['file'],
         exts: 'pdf',
         before: function () {
             layer.load();
             console.log(currentRow.id);
         },
         done: function (res) {
             
         },
         error: function (XMLHttpRequest) {
             layer.alert("错误提示:" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {iicon: 0});
             layer.closeAll('loading');
         }
     });
}

解决方式:

中间尝试了很多的方法,有的方法是可以在窗口关闭后再次的上传,但是在批量导入的时候上传窗口出来后无法浏览文件。

引入了额外的 upload.js 文件,修改源码,等方式都没有解决。

将上传框内容注释掉

<div id="xiaoming" style="disply: none">
    <!--<div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">
        <div style="margin-top: 15%">
              <i class="layui-icon">$#xe67c;</i>
              <p>点击上传,或将文件拖拽到此处</p>
        </div>
    </div>-->
</div>

js代码( 上传框的内容引入到 js 代码中,然后执行 upload.render(),再次进行长传框的引入 )

var html = '<div class="layui-upload-drag layui-col-md-offset1 div11" id="shangchuan">\n' +
    '        <div style="margin-top: 15%">\n' +
    '              <i class="layui-icon">$#xe67c;</i>\n' +
    '              <p>点击上传,或将文件拖拽到此处</p>\n' +
    '        </div>\n' +
    '    </div>';
upload.render();
var index1 = layer.open({
    type: 1,
    titile: '文件上传',
    content: ${'#xiaoming'},
    area: ['50%', '70%'],
    closeBtn: 1,
    btn: ['关闭'],
    btnAlign: 'c',
    yes: function () {
        layer.close(index1);
    },
    success: function () {
        uploadFile(currentRow);
    }
});
 function uploadFile(currentRow) {
    //
     upload.render({
         elem: '#shangchuan',
         url: '/*/*/*',
         data: {"id": currentRow.id},
         accept: ['file'],
         exts: 'pdf',
         before: function () {
             layer.load();
             console.log(currentRow.id);
         },
         done: function (res) {

         },
         error: function (XMLHttpRequest) {
             layer.alert("错误提示:" + XMLHttpRequest.status + ":" + XMLHttpRequest.responseText, {iicon: 0});
             layer.closeAll('loading');
         }
     });
}

 

 

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值