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');
}
});
}