袅袅牧童 首先就是晒出官网地址 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});
}
});
上面基本上是大部分比较实用的功能，如果有不明白的地方可以在文章下面留言。
官网上对参数的讲解都还蛮详细的。相对是一款比较容易上手的插件！
![[爱了]](/js/img/d1.gif)
![[尴尬]](/js/img/d16.gif)