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 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
javascript动态判断html元素并执行不同的操作
Jun 16 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
Jul 01 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue-cli V3.0版本的使用详解
Oct 24 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
php 动态多文件上传
2009/01/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
Javascript中Date类型和Math类型详解
2016/02/27 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
2018/10/02 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
浅谈Vuex注入Vue生命周期的过程
2019/05/20 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
利用soaplib搭建webservice详细步骤和实例代码
2013/11/20 Python
python对html代码进行escape编码的方法
2015/05/04 Python
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python线性方程组求解运算示例
2018/01/17 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
对Django url的几种使用方式详解
2019/08/06 Python
利用Python绘制有趣的万圣节南瓜怪效果
2019/10/31 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
大学新生军训自我鉴定
2014/03/18 职场文书
社会治安综合治理管理责任书
2014/04/16 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
党支部群众路线整改措施思想汇报
2014/10/10 职场文书
毕业生爱心捐书倡议书
2015/04/27 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP
SpringBoot读取Resource下文件的4种方法
2021/07/02 Java/Android