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

webuploader是什么?

下面是来自官网的介绍:

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

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

1.大文件上传,如何生成唯一文件名?

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

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

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

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

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

图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的一个方法,表示上传之前的处理你可以在这里附加你的额外的参数。

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

发表评论
留言与评论(共有 0 条评论) “”
   
验证码:

相关文章

推荐文章