webUpLoader百度上传插件

官网地址: http://fex-team.github.io/webuploader/doc/index.html
使用教程:参照api中的快速使用

一、开发中遇到的坑
1.当从bootstrap-table 表格中点击编辑按钮跳转页面后初始化插件时,需要定义一个全局变量 var uploader; 可以解决重复初始化，按钮无限变大的问题

二、初始化实例

var uploader;
function initMerchantList(){
    var $ = jQuery,
        //上传文件或图片的父容器
        $list = $('#showListPic'),
        // 优化retina, 在retina下这个值是2
        ratio = window.devicePixelRatio || 1,

        // 缩略图大小，可修改尺寸，注意此处可以被class冲掉
        thumbnailWidth = 150 * ratio,
        thumbnailHeight = 170 * ratio,

        // Web Uploader实例，如定义全局变量要删除这个部分
        uploader;

    //避免重复创建实例
    if (uploader != undefined) {
        uploader.destroy();
    }

    // 初始化Web Uploader
    uploader = WebUploader.create({

        // 自动上传。
        auto: true,

        // swf文件路径，使用绝对路径，如 yy_context+'/content/plugins/webuploader/'
        swf: '../../content/plugins/webuploader/Uploader.swf',

        // 文件接收服务端。
        server: yy_context +'/dhcop/file/uploadFile.do',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#addListPic',

        // 只允许选择文件，可选。
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        },
        //限制上传文件的个数
        fileNumLimit: 1
    });
   // 文件添加进来之前限制图片大小
    uploader.on( 'beforeFileQueued', function( file ) {
        if(file.size>512000 ){
            Modal.alert({msg:"图片大小不能超过500KB"});  //此处为弹出层插件
            uploader.destroy();
            initMerchantList();
        }
    });
    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        $list.empty();
        var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '</div>'
            ),
            $img = $li.find('img');

        $list.append( $li );

        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }

            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
    });

    // 文件上传成功
    uploader.on( 'uploadSuccess', function( file,data ) {
        var $success = $( '#'+file.id ).find('div.success');
        // 避免重复创建
        if ( !$success.length ) {
            $success = $('<div class="success ac"></div>').appendTo($( '#'+file.id ));
        }
        $success.text('上传成功');
        $("#listPicData1").val(data.fileUrls[0]);//保存上传文件的地址，通过"#listPicData1"这个input传给后端
    });

     // 文件上传失败，显示上传出错。
    uploader1.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error ac"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 文件上传结束后执行
    uploader1.on( 'uploadFinished', function( file ) {
        if (uploader1 != undefined) {
            uploader1.destroy();
        }
        initMerchantList();
    });