【前端组件】百度upload组件实践

百度文件上传组件实践

第一步，构建html界面

很简单的样式，使用可到插件官网参考样式

<span style="font-family:SimSun;font-size:12px;font-weight: normal;"><div id="uploader" class="wu-example">
    <!--用来存放文件信息-->
    <div id="thelist" class="uploader-list"><h2>请先选择xls,xlsx格式的文件！</h2></div>
    <div id="md5" style="display:none;"></div>                        //存放md5值
    <div id="fileName" style="display:none;"></div><span style="white-space:pre">		</span>      //存放hash文件名
    <div class="btns">
        <div id="picker" class="picker">选择文件</div>
    </div>
</div></span>

第二步，创建实例

我这里要求上传的文件为excel，所以功能要求比较简单，若是图片可以参照官网API文档

<span style="font-family:Microsoft YaHei;font-weight: normal;">var $ = jQuery,
    $list = $('#thelist'),
    $btn = $('#ctlBtn'),
    state = 'pending',
    uploader;

var uploader = WebUploader.create({

    // swf文件路径
    swf:'plugin/upload/js/Uploader.swf',

    // 文件接收服务端。
    server: IP+'common/upload.do',

    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#picker',
    method:'POST',  //上传方式
    formData:{      //上传参数
        "opr":"collection",
        "sid":$.cookie("sid")
    },
    fileNumLimit:'1',//允许上传的个数
    auto:true,
    accept:{         //允许上传的文件类型
        title: 'excel',
        extensions: 'xls,xlsx',
        mimeTypes: 'application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    }
}
);
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) {
    $list.empty();
    $list.append( '<div id="' + file.id + '" class="item">' +
        '<h4 class="info">' + file.name + '</h4>' +
        '<p id="upState" class="state">等待上传...</p>' +
    '</div>' );
    uploader.md5File( file )
        // 及时显示进度
        .progress(function(percentage) {
            console.log('Percentage:', percentage);
        })
        // 完成
        .then(function(val) {
                getMD5Value(val);
            }
        );
});

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
    var $li = $( '#'+file.id ),
        $percent = $li.find('.progress .progress-bar');

    // 避免重复创建
    if ( !$percent.length ) {
        $percent = $('<div class="progress progress-striped active">' +
          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
          '</div>' +
        '</div>').appendTo( $li ).find('.progress-bar');
    }

    $li.find('p.state').text('上传中');

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

uploader.on( 'uploadSuccess', function( file ,response) {
    console.log(response.data);
    $( '#'+file.id ).find('p.state').text('已上传');
    if(response.status == '0'){
        toastr.success(response.msg,'提示');
        $('#fileName').empty();
        $('#fileName').append(response.data.fileName);
        alert('业务总笔数为：'+response.data.totalCount+';业务总金额为'+response.data.totalAmount+'元');
    } else if(response.status == '1'){
        toastr.warning('系统维护中','提示');
    } else if(response.status == '2'){
        toastr.error('会话超时，请重新登录！','提示');
        redirect();
    } else{
        toastr.error(response.msg,'提示');
        $('#md5,#fileName').empty();
    }
    //toastr.success("上传成功！","提示");
});

uploader.on( 'uploadError', function( file ) {
    $( '#'+file.id ).find('p.state').text('上传出错');
    toastr.error("上传失败，请重试！","提示");
    $('#md5,#fileName').empty();
});

uploader.on( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});</span>

$(".picker").mousedown(function(){
    $list.empty();
    $('#md5,#fileName').empty();
    $list.append('<h2>请先选择xls,xlsx,xlsm,格式的文件！</h2>');
    uploader.reset();
    // uploader.removeFile( file );
});