webUploader选择文件按钮无效

版权声明：本文已在我的公众号：【前端很忙】，原创首发，欢迎关注~！转载请务必注明出处！ https://blog.csdn.net/Bs__Q/article/details/84025262

在使用webUploader上传文件时，按官网案例写完代码后，发现选择完文件后，再次点击选择文件按钮没反应，刷新页面后再点击又没有问题了，控制台也并没有代码报错，找了好久也没有找到问题。

后来在文档中发现，这种现象可能是在选择文件之后，程序已经执行完毕。如果需要再次选择文件，需要组件重新渲染或者重新实例化uploader。

使用 uploader.refresh() 完美解决：

// 实例化
var uploader = WebUploader.create({
    swf: BASE_URL + '/js/Uploader.swf',  // swf文件路径
    server: 'http://webuploader.duapp.com/server/fileupload.php', // 文件接收服务端
    pick: '#picker',  // 选择文件的按钮。可选。
});

// 当有文件被添加进队列的时候，如果需要再次选择文件，这里需要重新实例化
uploader.on( 'fileQueued', function( file ) {
	$list.append( '<div id="' + file.id + '" class="item">' +
	     '<h4 class="info">' + file.name + '</h4>' +
	     '<p class="state">等待上传...</p>' +
	 '</div>' );
	 
	 uploader.refresh()； // 重新实例化
});

还有一个情况，例如页面有tab切换，切换到另一个tab页后，选择文件可能也会失效。

解决办法就是，点击tab切换时，执行 uploader.refresh() 重新实例化一下组件，即可解决。