jQuery插件WebUploader实现文件上传


Posted in Javascript onNovember 07, 2016

最近在项目中用到了百度的文件图片上传插件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 相关文章推荐
基于Jquery的开发个代阴影的对话框效果代码
Jul 28 Javascript
javascript:void(0)的作用示例介绍
Oct 28 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
May 18 Javascript
bootstrap输入框组件使用方法详解
Jan 19 Javascript
深入理解Webpack 中路径的配置
Jun 17 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue.js做一个简单的编辑菜谱功能
May 08 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 #Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 #Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 #Javascript
AngularJS ng-template寄宿方式用法分析
Nov 07 #Javascript
easyui messager alert 三秒后自动关闭提示的实例
Nov 07 #Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 #Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 #Javascript
You might like
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
PHP添加PNG图片背景透明水印操作类定义与用法示例
2019/03/12 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
简单学习vue指令directive
2016/11/03 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
2017/01/05 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python编写打字训练小程序
2019/09/26 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
大学生自荐书范文
2013/12/10 职场文书
党员培训思想汇报
2014/01/07 职场文书
委托书模板
2014/04/04 职场文书
股东合作协议书
2014/04/14 职场文书
新学期标语
2014/06/30 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
廉政党课工作报告案例
2019/06/21 职场文书
小学生必读成语故事大全:送给暑假的你们
2019/07/09 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL