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