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;  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;  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

原文地址:https://www.cnblogs.com/Christeen/p/7058525.html