webUploader选择文件按钮无效

在使用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() 重新实例化一下组件,即可解决。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容