webuploader上传头像组件,带图片裁剪功能

功能预览

用法 见js代码 注释


Html
要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

  1. <!--dom结构部分-->  
  2. <div id="uploader-demo">  
  3.     <!--用来存放item-->  
  4.     <div id="fileList" class="uploader-list"></div>  
  5.     <div id="filePicker">选择图片</div>  
  6. </div>  
  7. Javascript  
  8. 创建Web Uploader实例  
  9.   
  10. // 初始化Web Uploader  
  11. var uploader = WebUploader.create({  
  12.   
  13.     // 选完文件后,是否自动上传。  
  14.     auto: true,  
  15.   
  16.     // swf文件路径  
  17.     swf: BASE_URL + '/js/Uploader.swf',  
  18.   
  19.     // 文件接收服务端。  
  20.     server: 'http://webuploader.duapp.com/server/fileupload.php',  
  21.   
  22.     // 选择文件的按钮。可选。  
  23.     // 内部根据当前运行是创建,可能是input元素,也可能是flash.  
  24.     pick: '#filePicker',  
  25.   
  26.     // 只允许选择图片文件。  
  27.     accept: {  
  28.         title: 'Images',  
  29.         extensions: 'gif,jpg,jpeg,bmp,png',  
  30.         mimeTypes: 'image/*'  
  31.     }  
  32. });  
  33. 监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。  
  34. PS: 这里得到的是Data URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。  
  35.   
  36. // 当有文件添加进来的时候  
  37. uploader.on( 'fileQueued', function( file ) {  
  38.     var $li = $(  
  39.             '<div id="' + file.id + '" class="file-item thumbnail">' +  
  40.                 '<img>' +  
  41.                 '<div class="info">' + file.name + '</div>' +  
  42.             '</div>'  
  43.             ),  
  44.         $img = $li.find('img');  
  45.   
  46.   
  47.     // $list为容器jQuery实例  
  48.     $list.append( $li );  
  49.   
  50.     // 创建缩略图  
  51.     // 如果为非图片文件,可以不用调用此方法。  
  52.     // thumbnailWidth x thumbnailHeight 为 100 x 100  
  53.     uploader.makeThumb( file, function( error, src ) {  
  54.         if ( error ) {  
  55.             $img.replaceWith('<span>不能预览</span>');  
  56.             return;  
  57.         }  
  58.   
  59.         $img.attr( 'src', src );  
  60.     }, thumbnailWidth, thumbnailHeight );  
  61. });  
  62. 然后剩下的就是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。  
  63.   
  64. // 文件上传过程中创建进度条实时显示。  
  65. uploader.on( 'uploadProgress', function( file, percentage ) {  
  66.     var $li = $( '#'+file.id ),  
  67.         $percent = $li.find('.progress span');  
  68.   
  69.     // 避免重复创建  
  70.     if ( !$percent.length ) {  
  71.         $percent = $('<p class="progress"><span></span></p>')  
  72.                 .appendTo( $li )  
  73.                 .find('span');  
  74.     }  
  75.   
  76.     $percent.css( 'width', percentage * 100 + '%' );  
  77. });  
  78.   
  79. // 文件上传成功,给item添加成功class, 用样式标记上传成功。  
  80. uploader.on( 'uploadSuccess', function( file ) {  
  81.     $( '#'+file.id ).addClass('upload-state-done');  
  82. });  
  83.   
  84. // 文件上传失败,显示上传出错。  
  85. uploader.on( 'uploadError', function( file ) {  
  86.     var $li = $( '#'+file.id ),  
  87.         $error = $li.find('div.error');  
  88.   
  89.     // 避免重复创建  
  90.     if ( !$error.length ) {  
  91.         $error = $('<div class="error"></div>').appendTo( $li );  
  92.     }  
  93.   
  94.     $error.text('上传失败');  
  95. });  
  96.   
  97. // 完成上传完了,成功或者失败,先删除进度条。  
  98. uploader.on( 'uploadComplete', function( file ) {  
  99.     $( '#'+file.id ).find('.progress').remove();  
  100. });  

更多细节,请查看js源码。

文件下载

天猫2016双11来啦-全球时尚主会场(超级红包)
虚拟主机
《JavaScript权威指南(第6版)(中文版)》PDF
《JavaScript设计模式与开发实践 》PDF
《编写高质量JavaScript代码的68个有效方法》PDF
《HTML5 权威指南》PDF
广告也精彩