基于WebUploader的文件上传插件

首先把地址甩出来，http://fex-team.github.io/webuploader/

里面有比较完整的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 id="' + file.id + '" class="item">' + 
 '<h4 class="info">' + file.name + '</h4>' + 
 '<p class="state">等待上传...</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 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触发事件，当上传成功事调用这个事件 
 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 id="' + file.id + '" class="file-item thumbnail">' + 
 '<img>' + 
 //创建一个为info的class 
 '<div class="info">' + 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 class="progress"><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 class="error"></div>').appendTo( $li ); 
 } 
 
 $error.text('上传失败'); 
 }); 
 
 // 完成上传完了，成功或者失败，先删除进度条。 
 uploader.on( 'uploadComplete', function( file ) { 
 $( '#'+file.id ).find('.progress').remove(); 
 }); 
});

转载请注明：有客帮 » 基于WebUploader的文件上传插件