jQuery插件WebUploader实现文件上传

2016-11-07 71 lijiao

最近在项目中用到了百度的文件图片上传插件WebUploader,分享给大家。

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。 采用大文件分片并发上传,极大的提高了文件上传效率。

需要在http://fex.baidu.com/webuploader/download.html点击打开链接下载WebUploader

// 初始化Web Uploader***上传图片 
var uploader = WebUploader.create({ 
 // 选完文件后,是否自动上传。 
 auto: true, 
 // 文件接收服务端地址,自动生成缩略图需要后端完成。 
 server: '/common/uploadFile?imageZip=1', 
 // 选择文件的按钮。可选。 
 // 内部根据当前运行是创建,可能是input元素,也可能是flash. 
 pick: '#sendimg', 
 fileNumLimit: 5, 
 //allowMagnify: false, 
 // 只允许选择图片文件。 
 accept:{ 
 title: 'Images', 
 extensions: 'gif,jpg,jpeg,bmp,png', 
 mimeTypes: 'image/*' 
 } 
}); 
// 当有文件添加进来的时候 
 uploader.on( 'fileQueued', function( file ) { 
 var $li = $( 
  '<div style="float:right" id="' + file.id + '" class="delimg">' + 
   '<img class="addimg"><div class="closeimg">×</div>' + 
  '</div>' 
  ), 
 $img = $li.find('img'); 
 
 // $list为容器jQuery实例 
 $("#piccon").append( $li ); 
 // 创建缩略图 
 // 如果为非图片文件,可以不用调用此方法。 
 // thumbnailWidth x thumbnailHeight 为 100 x 100 
 uploader.makeThumb( file, function( error, src ) { 
  if ( error ) { 
  $img.replaceWith('<span>不能预览</span>'); 
  return; 
  } 
 
  $img.attr( 'src', src ); 
 }, 100, 100 ); 
 $li.on('click', function() { 
  $(this).remove(); 
 }) 
 }); 
 // 文件上传过程中创建进度条实时显示。 
 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,response ) { 
  imgurl=response.fileName;//这里可以拿到后台返回的图片名称 
  //alert(imgurl); 
  $( '#'+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(); 
 });

更多精彩内容,请点击《jQuery上传操作汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

展开阅读全文

更多Javascript文章

javascript获取form里的表单元素的示例代码
Feb 14 36
css与javascript跨浏览器兼容性总结
Sep 15 44
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 35
javascript实现禁止复制网页内容
Dec 16 52
jQuery插件实现图片轮播特效
Jun 16 50
JS查找数组中重复元素的方法详解
Jun 14 49
JavaScript实现秒杀时钟倒计时
Sep 29 65
手机访问当前页面