JavaScript上传文件插件Web Uploader填坑记录

Web Uploader是百度的一个前端开源上传插件，支持加密、分片上传。很方便，功能强大，简直是前端菜鸟的福音。

官方文档的链接如下：
快速开始 - Web Uploader

从菜鸟的角度考虑，不建议看官方文档，推荐下面这篇文章：
Webuploader教程（一）------简单实用上传功能

这篇文章详细讲解了如何使用Web Uploader，代码很完整，备注也很详细。懒人或者赶时间的可以直接拷贝到自己项目代码里，改改变量就能用，就不细说了。

我在这里要说的是我用这个插件时踩的坑，如果你也踩了这个坑，欢迎来跟我一起吐槽。

首先，官方文档以及上面贴出来的文章都没用讲到的一点是，选择文件的按钮，必须是div元素！！！必须是div元素！！！必须是div元素！！！重要的问题说三遍。

刚开始，我是先写好静态页面再加上传文件功能的，所以我页面上选择文件的按钮用的是input元素。看完官方文档，很简单，只要绑定一个id就可以了，So easy！于是我给我的input元素加了个id，然后在JS代码中绑定，运行，点击。。。

没反应？！是不是我打开的方式不对？还是少了什么步骤？

Google一下，“Web uploader 插件 点击没反应”，才知道原来是input元素的问题，修改成div元素后就解决了。很想吐槽为什么必须用div，为什么官方文档没有说明这一点。。。

好了，选择文件功能可以用了，上传也没问题，进展顺利！只是这个按钮的样式怎么这么丑。。。位置也不对，太靠下了。

在浏览器里调试样式，如下图，给label的样式增加样式，没反应，加!important也没用。。。然后往上一级的样式调，还是没用。

元素代码

调了半天发现要修改

上传

里的webuploader-pick类的样式才行。

作为一个菜鸟，心好累，这么重要的事情，为什么官方文档不说清楚。。。