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

首先就是晒出官网地址 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是开启了文件自动上传

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

//点击开始上传

$('#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('更新成功', );

});

uploader.on( 'uploadError', function( file ) {

layer.msg('上传出错', );

});

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

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress .progress-bar');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('

' +

'

' +

'

' +

'

').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,换头像不用这么勤吧', );

break;

case 'F_DUPLICATE':

layer.msg('兄dei,你这个头像刚刚用过了好吗', );

break;

case 'Q_TYPE_DENIED':

layer.msg('兄dei,你这是在玩火啊', );

break;

default:

layer.msg(type, );

}

});

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

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