webuploader多例上传，按钮替换背景，上传图片替换背景图片，遇到的坑

程序员文章站 2024-03-19 08:55:10

...

第一次写博客，主要是想把自己遇到的问题记录下来
接到任务是，搞一个上传页面，然后找到了前端插件webuploader
下面内容都是涉及前端的，没有考虑后端,这张图是需求
webuploader多例上传，按钮替换背景，上传图片替换背景图片，遇到的坑

1.更换按钮的背景图片
2.同个页面有多个按钮
3.上传的图片显示在按钮的背景图片
4.怎么区别那个按钮上传的图片，上传替换对应的按钮背景图片

先补充一个问题，页面中添加多个上传按钮，id要跟你的div或者a标签的id一致，这代码放在js底部

uploader.addButton({
    id: '#card_negative',
});
uploader.addButton({
    id: '#card_hand',
});
uploader.addButton({
    id: '#zhengshu',
});

1.第一个问题：

怎么更换按钮背景图片，查了webuploader官网的API，我找了半天，我没有找到，自己研究，发现有三种方式，可以更换按钮的背景图片
第一种，如果页面需求中，只需要一个上传按钮的话，很简单，在webuploader.css中修改

.webuploader-pick {
    position: relative;
    display: inline-block;
    cursor: pointer;
    background: #00b7ee;
    padding: 10px 15px;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    overflow: hidden;
}
**

添加一个

**
background-image:url(‘../image/card_front.png’);
还有一个更简单的

<a id="zhengshu" onclick="add_id(4)" href="javascript:void(0)" style="height:2px;width:2px"><img src="../image/camera.png" ></a>

直接在你按钮中添加图片，按钮是a标签，注意a标签的id,要跟webuploader初始化id要一致，如下图，才生效
webuploader多例上传，按钮替换背景，上传图片替换背景图片，遇到的坑
这个方法也可以设置多个按钮，背景图，
第三种方法，比较麻烦点，只要适合页面中有多个上传按钮图片

直接设置对应ID里面的 css

<style>
    .webuploader-pick {
        background-color:#ffffff;


    }

    /* 设置背景图片 */
    #card_front > div{
        background-color:#F8F8FF;
        background-image:url('../image/card_front.png');
        width: 215px;
        height:138px;
    } 
    /* 设置背景图片 */
    #card_negative > div{
        background-color:#F8F8FF;
        background-image:url('../image/card_negative.png');
        width: 215px;
        height:138px;
    } 
    /*  设置背景图片 */
    #card_hand > div{
        background-color:#F8F8FF;
        background-image:url('../image/card_hand.png');
        width: 215px;
        height:138px;
    }  
</style>

第三个问题上传的图片显示在按钮的背景图片

在创建略缩图中更换，对应按钮的背景图片，这个方法已经有对应图片的src了，

 // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }
        /*判断是哪个按钮来替换对应背景颜色*/
        if (flag_id=='1') {
            $("#card_front div").css("background-size","215px 138px");
            $("#card_front div").css("background-image","url("+src+")");
        }
        else if (flag_id=='2') {
            $("#card_negative div").css("background-size","215px 138px");
            $("#card_negative div").css("background-image","url("+src+")");

        }else if (flag_id=='3') {
            $("#card_hand div").css("background-size","215px 138px");
            $("#card_hand div").css("background-image","url("+src+")");
        }else if (flag_id=='4') {
            $img.attr( 'src', src );

        }
    }, thumbnailWidth, thumbnailHeight );
});