高性能标准网站建设进阶指南 pdf小程序开发工具

最近使用layui upload组件时，碰到了上传文件无反应的问题，感到非常困惑。

因为使用layui upload组件不是一次两次了，之前每次都可以，这次使用同样的配方，同样的姿势，为什么就不行了呢？

照例先百度一番，出来的文章都是说第二次上传同样的文件无反应的问题，这个有相应的解决方法。但是我的问题是第一次上传就不行，似乎没有人遇到过这个问题。

苦苦思索一番，依然无果。尝试不断怀疑各种之前已经被验证过的没问题的写法，没有任何效果。就只差怀疑人生了。

虽然搞得我几乎崩溃，但想让我就此放弃，那是不可能的。找出layui upload的源码，通过阅读源码来一步步分析，我的问题是点击按钮可以打开文件选择对话框，选择文件之后就没有任何反应。通过断点调试，发现是change事件没触发，就是这一句

    that.elemFile.on('change', function(){$(this).trigger('upload.change');});

为什么会不触发呢？这个change事件是绑定在

<input class="layui-upload-file" type="file" accept="" name="file">

这个文件上传组件上面的，其他文章里面提到的二次上传同样的文件无反应也是跟这里有关，因为这个input给value属性赋值为已选择的文件的路径，当第二次上传同样的文件因为路径相同，就不会处理。解决办法就是点击时给这个input的value赋值为空值。但是我这里的value值第一次的时候是空值，所以显然跟这个问题不一样。

不是这个问题那会是什么问题？change事件没绑定成功？什么情况下会导致事件绑定不成功？在源码中发现有这么一行

 // 防止事件重复绑定if(options.elem.data('haveEvents')) return;

设置完绑定事件后，

options.elem.data('haveEvents', true);

会给haveEvents赋值，下次就不会再次执行到绑定事件了。

然后我发现在我的代码中初始化的时候因为方法执行回调函数的原因，导致layui.upload.render被执行了两次，结合源代码，我发现我的问题是这样的：

第一次执行layui.upload.render，new了一个upload对象，动态创建<input type="file"/>文件上传组件,事件也是绑定在文件上传组件上面的。

第二次执行layui.upload.render，new了一个新的upload对象，动态创建一个新的<input type="file"/>文件上传组件,但是因为if(options.elem.data('haveEvents')) return;的阻止，事件绑定不上了。

原因找到了，如何解决呢？

其实layui文档里也写了，调用layui.upload.render时，会返回一个实例，我们保存这个实例，下次不要重复去调layui.upload.render就可以了，要调整参数通过实例去调reload方法。