zoukankan      html  css  js  c++  java
  • WebUploader文件图片上传插件的使用

      最近在项目中用到了百度的文件图片上传插件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();
    });
  • 相关阅读:
    LeetCode "Super Ugly Number" !
    LeetCode "Count of Smaller Number After Self"
    LeetCode "Binary Tree Vertical Order"
    LeetCode "Sparse Matrix Multiplication"
    LeetCode "Minimum Height Tree" !!
    HackerRank "The Indian Job"
    HackerRank "Poisonous Plants"
    HackerRank "Kundu and Tree" !!
    LeetCode "Best Time to Buy and Sell Stock with Cooldown" !
    HackerRank "AND xor OR"
  • 原文地址:https://www.cnblogs.com/goloving/p/7392078.html
Copyright © 2011-2022 走看看