专业简历制作网站有哪些,网站建设入门教程pdf,网站常用图片,徐州手机网站制作最近使用layui upload组件时#xff0c;碰到了上传文件无反应的问题#xff0c;感到非常困惑。
因为使用layui upload组件不是一次两次了#xff0c;之前每次都可以#xff0c;这次使用同样的配方#xff0c;同样的姿势#xff0c;为什么就不行了呢#xff1f;
照例先…最近使用layui upload组件时碰到了上传文件无反应的问题感到非常困惑。
因为使用layui upload组件不是一次两次了之前每次都可以这次使用同样的配方同样的姿势为什么就不行了呢
照例先百度一番出来的文章都是说第二次上传同样的文件无反应的问题这个有相应的解决方法。但是我的问题是第一次上传就不行似乎没有人遇到过这个问题。
苦苦思索一番依然无果。尝试不断怀疑各种之前已经被验证过的没问题的写法没有任何效果。就只差怀疑人生了。
虽然搞得我几乎崩溃但想让我就此放弃那是不可能的。找出layui upload的源码通过阅读源码来一步步分析我的问题是点击按钮可以打开文件选择对话框选择文件之后就没有任何反应。通过断点调试发现是change事件没触发就是这一句 that.elemFile.on(change, function(){$(this).trigger(upload.change);});
为什么会不触发呢这个change事件是绑定在
input classlayui-upload-file typefile accept namefile
这个文件上传组件上面的其他文章里面提到的二次上传同样的文件无反应也是跟这里有关因为这个input给value属性赋值为已选择的文件的路径当第二次上传同样的文件因为路径相同就不会处理。解决办法就是点击时给这个input的value赋值为空值。但是我这里的value值第一次的时候是空值所以显然跟这个问题不一样。
不是这个问题那会是什么问题change事件没绑定成功什么情况下会导致事件绑定不成功在源码中发现有这么一行 // 防止事件重复绑定if(options.elem.data(haveEvents)) return;
设置完绑定事件后
options.elem.data(haveEvents, true);
会给haveEvents赋值下次就不会再次执行到绑定事件了。
然后我发现在我的代码中初始化的时候因为方法执行回调函数的原因导致layui.upload.render被执行了两次结合源代码我发现我的问题是这样的
第一次执行layui.upload.rendernew了一个upload对象动态创建input typefile/文件上传组件,事件也是绑定在文件上传组件上面的。
第二次执行layui.upload.rendernew了一个新的upload对象动态创建一个新的input typefile/文件上传组件,但是因为if(options.elem.data(haveEvents)) return;的阻止事件绑定不上了。
原因找到了如何解决呢
其实layui文档里也写了调用layui.upload.render时会返回一个实例我们保存这个实例下次不要重复去调layui.upload.render就可以了要调整参数通过实例去调reload方法。
