您现在的位置是:首页 >  编程分享 > JQUERY丨JSJQUERY丨JS

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

袅袅牧童 推荐 转载 编程分享 2018-07-23

简介 传功能。或者想实现ajax上传文件的朋友也可以用这个,总体比较简单。


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


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

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

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


解压后是一堆文件其实用不上这么多,一个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是开启了文件自动上传

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

//点击开始上传
$('IdctlBtn').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 = $( 'Id'+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 ) {
    $( 'Id'+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});
}
});

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

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

转载:https://php54.com/a/000J.html

Tags:


本篇评论 —— 揽流光,涤眉霜,清露烈酒一口话苍茫。


    声明:参照站内规则,不文明言论将会删除,谢谢合作。


      最新评论



ABOUT ME

Name:袅袅牧童 | Arkin

Job:Web全栈技术工程师

WeChat:nnmutong

Email:nnmutong@icloud.com

最新评论

标签云