Github上的例子没看太明白，在网上找了些资料自己写了个demo，基本上就是用create方法初始化，然后on一堆事件，上传的进度条用的是swf格式的动画，感觉不是很先进的样子。不过我暂时也没搞明白怎么让进度条显示出来。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="./css/webuploader.css" rel="stylesheet"> </head> <body> <div id="uploader"> <!--用来存放文件信息--> <div id="thelist"></div> <div> <div id="picker">选择文件</div> <button id="ctlBtn">开始上传</button> </div> </div> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/webuploader.js"></script> <script> var uploader = WebUploader.create({ // swf文件路径 swf: './js/Uploader.swf', // 文件接收服务端。 server: 'http://localhost:8888/uploader.html', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker', // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false }); // 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file ) { alert(file.id + ":" + file.name + "被添加进队列"); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { /*var $li = $( '#'+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=" 0%">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' );*/ alert("传输中，此时显示进度条"); }); uploader.on( 'uploadSuccess', function( file ) { /*$( '#'+file.id ).find('p.state').text('已上传');*/ alert("上传成功"); }); uploader.on( 'uploadError', function( file ) { /*$( '#'+file.id ).find('p.state').text('上传出错');*/ alert("上传失败"); }); uploader.on( 'uploadComplete', function( file ) { /*$( '#'+file.id ).find('.progress').fadeOut();*/ alert("上传结束"); }); $("#ctlBtn").on('click', function() { uploader.upload(); }); </script> </body> </html>