layui弹框中的文件上传只执行一次choose的问题记录

layui弹框中的文件上传问题记录

 

1.上传文件的时候需要先弹出一个层再选择文件进行上传，发现layui.upload上传一次或者关闭弹框之后在不刷新页面的前提下不会执行choose方法了；

原因可能是upload.render方法执行一次之后，第二次没有把elem指定的这个元素对象重新生成，而是有选择性的更新对象的属性，比如file就应该没更新，还是上一次的file导致change方法没触发；

最简单的是把elem指定的这个元素变成动态添加，而不是先在页面写死；

var initUpload = function () {
$('#uploadElem').html(`<div id="uploadBox"><button
type="button" class="layui-btn" id="test1">
<i class="layui-icon">&#xe67c;</i>选择excel文件
</button><span id="selected"></span></div>`);
var uploadInst = upload.render({
elem: '#test1', //绑定元素
exts: 'xls|xlsx',
url: '', //上传接口
done: function (res) {

}
)}
}
2.layui文件上传中如何先判断后再弹出文件选择框

<button type="button" class="layui-btn layui-btn-normal" onclick="test()">先检查再选图片的按钮</button>
<button type="button" id="idUpload" style="opacity:0;">上传图片</button><!-- 这个按钮隐藏 -->

<script>
var uploadInst = layui.upload.render({
elem: '#idUpload',
url: '/upload/',
done: function(res) {
//上传完毕回调
},
error: function() {
//请求异常回调
}
});
function test() {
//在此做你的检查
$('#idUpload').click(); //检查通过再选上传图片
}
</script>
3.清空 input file 值，以免出现同名文件不可选

var uploadRender = upload.render();

在choose方法中添加：uploadRender.config.elem.next()[0].value = '';

4.限制了所选文件类型后，如果选择的文件包含不支持格式的文件则不走choose回调
————————————————
版权声明：本文为CSDN博主「lijingjingjing22」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/lijingjingjing22/article/details/116453776