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

boyanx1周前技术教程2

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 ,但是显然这不是个好的方法(因为个数不是定死的),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的一个方法,表示上传之前的处理你可以在这里附加你的额外的参数。

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

相关文章

10G 大文件、秒传、断点续传、分片上传

在实现分片上传的过程,需要前端和后端配合,比如前后端的上传块号的文件大小,前后端必须得要一致,否则上传就会有问题。其次文件相关操作正常都是要搭建一个文件服务器的,比如使用fastdfs、hdfs等。超...

字节跳动面试官,我也实现了大文件上传和断点续传

前言前几天看到一个文章,感触很深字节跳动面试官:请你实现一个大文件上传和断点续传作者从0实现了大文件的切片上传,断点续传,秒传,暂停等功能,深入浅出的把这个面试题进行了全面的剖析彩虹屁不多吹,我决定蹭...

一文搞定SpringBoot分片上传、断点续传、大文件极速秒传功能

文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。