不能听命于自己者,就要受命于他人。网站首页学海无涯

通过文件上传插件WebUploader实现文件上传

陈佚2018-12-13 22:51:275人围观暂无分类
简介今天讲一下通过前端文件上传插件实现上传文件,大文件也比较适用,带分片上传功能。或者想实现ajax上传文件的朋友也可以用这个,总体比较简单。

首先就是晒出官网地址 http://fex.baidu.com/webuploader/

image.png

图片上基本上就是这款插件的优势了,下面来简单说下怎么使用webuploader上传文件。

首先就是去官网下载最新的插件包啦。

下载直达通道:https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip

image.png

解压后是一堆文件其实用不上这么多,一个JS 和 css就可以了

第一步引入JS文件 webuploader.js

//文件上传
var uploader = WebUploader.create({
    // swf文件路径
    swf: '/Public/Common/webUploader/Uploader.swf',
    // 文件接收服务端。
    server: "/uploadImg",
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建,可能是input元素,也可能是flash.
    // 自动上传
    auto : true ,
    // 选择文件按钮
    pick: '.updateHeadImg',
    // 分片大小
    chunkSize: 5242880, 
    // 单个文件大小
    fileSingleSizeLimit : 5242880,
    // 文件总数
    fileNumLimit : 2,
    // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
    accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*'
    },
    resize: false
});

其实pick就是上传按钮,server就是上传文件的接口,auto是开启了文件自动上传

如果想要点击上传的话,这样

//点击开始上传
$('#ctlBtn').click(function(){
    uploader.upload();
});

下面分别是上传成功和上传失败的的回调

uploader.on( 'uploadSuccess', function(file,response) {
  console.log(response._raw);
  layer.close(load);
  $('.img').attr('src',response._raw);
  layer.msg('更新成功', {icon: 1,time: 1000});
});
uploader.on( 'uploadError', function( file ) {
  layer.msg('上传出错', {icon: 5,time: 1000});
});

如果上传文件比较大的话,上传进度条有非常好的用户体验。通过下面的代码控制。

// 文件上传过程中创建进度条实时显示。
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( 'uploadComplete', function( file ) {
    $( '#'+file.id ).find('.progress').fadeOut();
});
//上传出错提示
uploader.on("error", function (type) {
  switch(type){
case 'Q_EXCEED_NUM_LIMIT':
  layer.msg('兄dei,换头像不用这么勤吧', {icon: 5,time: 1000});
  break;
case 'F_DUPLICATE':
  layer.msg('兄dei,你这个头像刚刚用过了好吗', {icon: 5,time: 1000});
  break;
  case 'Q_TYPE_DENIED':
  layer.msg('兄dei,你这是在玩火啊', {icon: 5,time: 1000});
  break;
default:
  layer.msg(type, {icon: 5,time: 1000});
}
});

上面基本上是大部分比较实用的功能,如果有不明白的地方可以在文章下面留言。

官网上对参数的讲解都还蛮详细的。相对是一款比较容易上手的插件!

文章评论

    共有0条评论来说两句吧...