webuploader的使用

写在前面的话：

　　最近用到了 webuploader 上传图片 的功能（WebUploader 0.1.5），因此在这里记录一下使用过程当中遇到的问题，亲测有效~

---

 

1.下载插件：http://fex.baidu.com/webuploader/download.html

2.使用方法：http://fex.baidu.com/webuploader/doc/index.html

3.我通常的用法：

 

4.我遇到的问题：

　　1）问题描述：

　　在切换tab的时候，发现只有第一个tab中的上传功能有效，其余tab中的上传功能点击是不起做用的，审查元素时发现生成的一个div 的宽高是 1px * 1px：

<div id="rt_rt_1bj4939bees4ncqofr1kf01ekl1" style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;">
    <input type="file" name="file" class="webuploader-element-invisible" accept="image/jpg,image/jpeg,image/png">
    <label style="opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
</div>

　　因此点击区域为1px * 1px，然而当按下F12，再一次点击的时候又有效了，宽高又有了正常的值，而非1px * 1px；那么怎么解决？

　　解决方法：

　　我也是搜了比较多的文章，发现此文章：   webuploader在display none的web容器中没法运行，选择图片按钮点击无效！

文章中的方法是，在切换tab的时候，将webuploader实例 refresh一次。加入如下代码：

webuploader.refresh();

其中   webuploader  是在建立实例时的名字，以下边的代码里面的 webuploader：

var webuploader = WebUploader.create（{  }）

 　　2）同一张图片不能重复上传的问题，

　　　　只要在配置项里面加上下边这句： duplicate :true

　　　　解决方法方法来自： http://blog.csdn.net/qq_20910089/article/details/50378041