webuploader上传组件的一些冷门用法，总有一个你会用到

大家好，欢迎来到IT知识分享网。

webuploader是什么？

下面是来自官网的介绍：

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。

webuploader比较常用的功能就是大文件分片上传，在上传的过程中会有一些冷门用法，下面慢慢为你讲解：

1.大文件上传，如何生成唯一文件名？

这个问题在我一以前的另一篇文章中有详细说明这里就不在重复。详见一下地址：

https://www.toutiao.com/article//

2.如何绑定多个上传按钮？

为什么会产生这个问题？比如页面中会有多个资料需要上传如下图：

图1

那如何解决这个问题，你也可以实例化多个webuploader ，但是显然这不是个好的方法（因为个数不是定死的），webuploader默认通过pick属性绑定一个按钮，不过webuploader提供了一个方法可以绑定多个按钮。方法如下：

 uploader.addButton({ id: '#up' + i });

由上面的多个上传按钮引发了下面这个问题。

3.如何判断我是点击的哪个上传按钮呢？

使用下面的方法就可以得到当前上传按钮的对象

 $('#rt_' + file.source.ruid).parent() //具体用法如下： uploader.onUploadBeforeSend = function(obj, data, headers) { var button = $('#rt_' + obj.file.source.ruid).parent() };

4.判断是哪个按钮有了？那么每个按钮上传时附带不同的参入如何实现呢（比如图一中的textarea的值）？

既然能获得到当前选择的是哪个上传按钮，那么我们可以获取这行的文本域的值，但是如何和上传文件一起提交呢？请参考以下方法：

 uploader.onUploadBeforeSend = function(obj, data, headers) { data.text = $('#rt_' + obj.file.source.ruid).parent().parent().find('textarea').val(); //这里还可以添加其他参数 };

onUploadBeforeSend是webuploader的一个方法，表示上传之前的处理你可以在这里附加你的额外的参数。

上面这些用法希望对你有帮助。