// 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file ) { console.log('文件加入队列后') var $list = $('#fileList') $list.append( '<div>' + '<h4>' + file.name + '</h4>' + '<p>等待上传...</p>' + '</div>' ); });
点击 选择文件 按钮后，选择一个文件，就会如上图所示，出现文件列表，从代码可以看出，他是在选择文件之后，动态添加的的 dom ，显示文件名称以及状态，关于文件的详细信息，则可以从 fileQueued 事件的回调函数的参数 file 获取，我们打印一下 file
ext------------------------------文件后缀
id-------------------------------文件ID
lastModifiedDate-----------------文件最后修改时间
name-----------------------------文件名称
size-----------------------------文件大小（这里是以字节为单位，1字节=1KB,1M=1024KB,1m=1024*1024字节）
source---------------------------包含一些文件信息和方法，例如唯一标识的`ruid`、`uid`、`_hash`
文件上传中
主要利用了 webuploader 的 uploadProgress 事件，该事件会在文件上传过程中触发，可以利用该事件创建进度条
// 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { console.log('文件上传中',file,percentage) var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<div>' + '<div role="progressbar">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' ); //根据上传进度改变进度条宽度 });
uploadProgress 事件的回调函数的参数 file 是文件的一些信息， percentage 则是文件上传进度，1为上传完毕，从上面代码可以看到，在文件开始上传后，会在 fileQueued 事件中动态创建的 id=fileList 元素中动态创建一个进度条容器，并根据上传进度动态改变进度条的宽度，这样就有了进度条的效果，需要注意的是，以上事件中动态生成的 dom 元素，例如文件列表、进度条的样式都需要我们自己去写， webuploader.css 中并没有，这一点官网没提醒，我第一次使用时，也被坑了
文件上传成功、失败、完成处理
文件上传成功
可以在该事件回调函数中移除进度条、更改进度条状态等操作
uploader.on( 'uploadSuccess', function( file,response ) { console.log('文件上传成功',file,response) $( '#'+file.id ).find('p.state').text('已上传'); });
文件上传失败
可以在该事件回调函数中更改提示文本，改变进度条样式，删除上传失败的文件等操作
uploader.on( 'uploadError', function( file,reason ) { console.log('文件上传失败',file,reason) $( '#'+file.id ).find('p.state').text('上传出错'); });
文件上传完成
可以在该事件回调函数中更改提示文本，改变进度条样式等操作
uploader.on( 'uploadComplete', function( file ) { console.log('文件上传完成') $( '#'+file.id ).find('.progress').fadeOut(); });
总结