webuploader 同一页面两个上传按钮解决办法

实现方法

上传div设置class=”filePicker”,添加方法addWebuploadCurrent(回调值input的id);

html部分

<div class="col-sm-5 col-xs-9">
    <p>请上照片</p>
    <div class="child-img">
        <img src="__PUBLIC__/lfey/images/child.png" id="preview_img1">
    </div>
    <div class="filePicker" onclick="addWebuploadCurrent('child_pic')">上传</div>
    <input type="hidden" name="child_pic" id="child_pic">
</div>
<div class="col-sm-5 col-xs-9">
    <div class="filePicker" onclick="addWebuploadCurrent('residence_photo')">上传</div>
    <input type="hidden" name="residence_photo" id="residence_photo">
    <img src="" id="residence_photo_preview" style="width: 200px;">
</div>

js部分

<script type="text/javascript">
    var BASE_URL = '__PUBLIC__/2016dean/webuploader';
    var APP = '__APP__/Index/upload_pic';
    function addWebuploadCurrent(id) {
        $(".webupload_current").removeClass("webupload_current");
        $("#"+id).addClass("webupload_current");
    }
</script>
<script type="text/javascript">
// 图片上传
jQuery(function() {
    var $ = jQuery,
    ratio = window.devicePixelRatio || 1,
    thumbnailWidth = 100 * ratio,
    thumbnailHeight = 100 * ratio,
    uploader;
    uploader = WebUploader.create({
        fileNumLimit:10,
        auto: true,
        swf: BASE_URL + '/Uploader.swf',
        server: APP,
        pick: '.filePicker',
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png'
        }
    });
    uploader.on('fileQueued', function (file) {
        $(".webupload_current").before('<label>正在上传,请稍等...</label>');
    });
    uploader.on( 'uploadSuccess', function( file, data) {
        $("#" + file.id).remove();
        $(".webupload_current").prev().remove();
        $(".webupload_current").val(data._raw);
        if($(".webupload_current").attr("id") == 'residence_photo'){
            $("#residence_photo_preview").attr('src',data._raw);
        }else{
            $('#preview_img1').attr('src',data._raw);
        }
    });
    uploader.addButton({
        id: '#filePicker1'
    });
});
</script>

猜你喜欢

转载自blog.csdn.net/he3236220/article/details/80608741