WebUploader文件图片上传插件的使用

Posted 2020-10-03 古兰精

　　最近在项目中用到了百度的文件图片上传插件WebUploader。分享给大家

　　需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader

/*图片上传 */    
var $ = jQuery, 
       $img=$("#imagePath_img"),
    // 优化retina, 在retina下这个值是2
    ratio = window.devicePixelRatio || 1,
    // 缩略图大小
    thumbnailWidth = 1 * ratio,
    thumbnailHeight = 1 * ratio,
    // Web Uploader实例
    uploader;
// 初始化Web Uploader***上传图片
uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: ‘${basePath}/scripts/jQuery/plugins/webuploader/Uploader.swf‘,
    // // 文件接收服务端地址，自动生成缩略图需要后端完成。
    server: ‘${basePath}/policy/policyFileAction_add.do?policyFile.policyId=‘+$("#policyId_hidden").val()+‘&policyFile.originalId=‘+$("#originalId_hidden").val()+‘&policyFile.type=0‘,
    //或例子：server: ‘/common/uploadFile?imageZip=1‘,
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: ‘#sendimg‘,
    fileNumLimit: 5,
    //allowMagnify: false,
     duplicate:true,//允许上传重复文件
    // 只允许选择图片文件。
    accept:{
    title: ‘Images‘,
    extensions: ‘gif,jpg,jpeg,bmp,png‘,
    mimeTypes: ‘image/*‘
    }
});
uploader.on("error",function (type){
    if (type=="Q_TYPE_DENIED"){
        dialogMsg(‘请上传JPG、JPEG、PNG、BMP格式文件！‘,0);
    }
});
// 当有文件添加进来的时候
uploader.on( ‘fileQueued‘, function( file ) {
    var $li = $(
            ‘<div style="float:right" id="‘ + file.id + ‘" class="delimg">‘ +
                ‘<img class="addimg"><div class="closeimg">×</div>‘ +
            ‘</div>‘
            ),
    $img = $li.find(‘img‘);

    // $list为容器jQuery实例
    $("#piccon").append( $li );
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    uploader.makeThumb( file, function( error, src ) {
        if ( error ) {
            $img.replaceWith(‘<span>不能预览</span>‘);
            return;
        }

        $img.attr( ‘src‘, src );
    }, 100, 100 );//可以写为thumbnailWidth,  thumbnailHeight
    $li.on(‘click‘, function() {
        $(this).remove();
    })
});
// 文件上传过程中创建进度条实时显示。
uploader.on( ‘uploadProgress‘, function( file, percentage ) {
    var $li = $( ‘#‘+file.id ),
        $percent = $li.find(‘.progress span‘);

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $(‘<p class="progress"><span></span></p>‘)
                .appendTo( $li )
                .find(‘span‘);
    }

    $percent.css( ‘width‘, percentage * 100 + ‘%‘ );
});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on( ‘uploadSuccess‘, function( file,response ) {
    imgurl=response.fileName;//这里可以拿到后台返回的图片名称
    //alert(imgurl);
    $( ‘#‘+file.id ).addClass(‘upload-state-done‘);
});

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

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

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

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( ‘uploadComplete‘, function( file ) {
    $( ‘#‘+file.id ).find(‘.progress‘).remove();
});