首先把地址甩出来，
里面有比较完整的demo案例文档，本文主要是基于文件上传和图片上传增加了大量的注释，基本保证了每行代码都有注释以助于理解，是对官网demo的增强版，希望可以帮助大家更好的理解该插件
首先是文件上传
jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader; //初始化，实际上可直接访问Webuploader.upLoader uploader = WebUploader.create({ // 不压缩image resize: false, // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 发送给后台代码进行处理，保存到服务器上 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker' }); // uploader添加事件，当文件被加入队列后触发 uploader.on( 'fileQueued', function( file ) { //在加入队列时，创建一个样式，供后面上传成功失败等等调用，定义一个*p表示指向该事件样式 $list.append( '<div>' + '<h4>' + file.name + '</h4>' + '<p>等待上传...</p>' + '</div>' ); }); // 文件上传过程中触发，携带上传进度，file表示上传的文件，percentage表示上传的进度 uploader.on( 'uploadProgress', function( file, percentage ) { //定义一个变量名创建进度模块 var $li = $( '#'+file.id ), //找到$li下class为progress的，并定义为$percent------为什么先寻找在创建 $percent = $li.find('.progress .progress-bar'); //如果$percent没值，就创建进度条加入到对应的文件名下， 避免重复创建 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 + '%' ); }); //uploader触发事件，当上传成功事调用这个事件 uploader.on( 'uploadSuccess', function( file ) { //调用文件被加入时触发的事件，findstate，并添加文本为已上传 $( '#'+file.id ).find('p.state').text('已上传'); }); //uploader触发事件，当上传失败时触发该事件 uploader.on( 'uploadError', function( file ) { //调用文件被加入时触发的事件，findstate，并添加文本为上传出错 $( '#'+file.id ).find('p.state').text('上传出错'); }); //该事件表示不管上传成功还是失败都会触发该事件 uploader.on( 'uploadComplete', function( file ) { //调用 $( '#'+file.id ).find('.progress').fadeOut(); }); //这是一个特殊事件，所有的触发都会响应到，type的作用是记录当前是什么事件在触发，并给state赋值 uploader.on( 'all', function( type ) { if ( type === 'startUpload' ) { state = 'uploading'; } else if ( type === 'stopUpload' ) { state = 'paused'; } else if ( type === 'uploadFinished' ) { state = 'done'; } //根据state判断弹出文本 if ( state === 'uploading' ) { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } }); //当按钮被点击时触发，根据状态开始上传或是暂停 $btn.on( 'click', function() { if ( state === 'uploading' ) { uploader.stop(); } else { uploader.upload(); } }); });
然后是图片上传
jQuery(function() { //将jquery赋值给一个全局的变量 var $ = jQuery, $list = $('#fileList'), // 优化retina, 在retina下这个值是2，设备像素比 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // Web Uploader实例 uploader; // 初始化Web Uploader uploader = WebUploader.create({ // 自动上传。 auto: true, // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。调用代码，把图片保存在服务器端 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允许选择文件，可选。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候触发这个事件 uploader.on( 'fileQueued', function( file ) { //定义变量li var $li = $( //创建一个id '<div>' + '<img>' + //创建一个为info的class '<div>' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); //把定义的li加入到list中 $list.append( $li ); // 创建缩略图，此过程为异步，需要传入callBack（function( error, src ))，通常在图片加入队列后调用此方法，以增强交互性 //callback有两个参数，当失败时调用error，src存放的是缩略图的地址 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<p><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' ); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done'); }); // 文件上传失败，现实上传出错。 uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('<div></div>').appendTo( $li ); } $error.text('上传失败'); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove(); }); });
下面是java的后台代码，用于获取上传文件，并将上传文件的真实路径写入服务器