jquery组件WebUploader文件上传用法详解


Posted in Javascript onOctober 23, 2020

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件,下文来为各位演示一下关于jquery WebUploader文件上传组件的用法。

使用WebUploader还可以批量上传文件、支持缩略图等等众多参数选项可设置,以及多个事件方法可调用,你可以随心所欲的定制你要的上传组件。

jquery组件WebUploader文件上传用法详解

接下来我以图片上传实例,给大家讲解如何使用WebUploader。

HTML

我们首先将css和相关js文件加载。

<link rel="stylesheet" type="text/css" href="css/webuploader.css"> 
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="js/webuploader.min.js"></script>

然后我们需要准备一个按钮#imgPicker,和一个用来存放添加的文件信息列表的容器#fileList,在body中加入如下代码:

<div id="uploadimg"> 
 <div id="fileList" class="uploader-list"></div> 
 <div id="imgPicker">选择图片</div> 
</div>

JAVASCRIPT

首先创建Web Uploader实例:

var uploader = WebUploader.create({ 
 auto: true, // 选完文件后,是否自动上传 
 swf: 'js/Uploader.swf', // swf文件路径 
 server: 'upload.php', // 文件接收服务端 
 pick: '#imgPicker', // 选择文件的按钮。可选 
 // 只允许选择图片文件。 
 accept: { 
 title: 'Images', 
 extensions: 'gif,jpg,jpeg,bmp,png', 
 mimeTypes: 'image/*' 
 } 
});

接着监听fileQueued事件,即当有文件添加进来的时候,通过uploader.makeThumb来创建图片预览图。

uploader.on( 'fileQueued', function( file ) { 
 var $list = $("#fileList"), 
 $li = $( 
 '<div id="' + file.id + '" class="file-item thumbnail">' + 
 '<img>' + 
 '<div class="info">' + file.name + '</div>' + 
 '</div>' 
 ), 
 $img = $li.find('img'); 
 
 
 // $list为容器jQuery实例 
 $list.append( $li ); 
 
 // 创建缩略图 
 uploader.makeThumb( file, function( error, src ) { 
 if ( error ) { 
 $img.replaceWith('<span>不能预览</span>'); 
 return; 
 } 
 
 $img.attr( 'src', src ); 
 }, 100, 100 ); //100x100为缩略图尺寸 
});

最后是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess,
uploadError, uploadComplete事件。

// 文件上传过程中创建进度条实时显示。 
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, res ) { 
 console.log(res.filePath);//这里可以得到上传后的文件路径 
 $( '#'+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(); 
});

到这里,我们就实现了一个简单的图片上传实例,点击“选择图片”会弹出文件选择对话框,当选择图片后,即进入上传图片流程,会将图片对应的缩略图现实在列表里。

常用选项设置与事件调用

Web Uploader提供了丰富的API选项设置与事件调用。

jquery组件WebUploader文件上传用法详解

jquery组件WebUploader文件上传用法详解

常用的事件说明:

jquery组件WebUploader文件上传用法详解

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

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

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
javascript中的关于类型转换的性能优化
Dec 14 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
JS+CSS简单树形菜单实现方法
Sep 12 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
JavaScript原型对象原理与应用分析
Dec 27 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 Javascript
jquery css实现流程进度条
Mar 26 jQuery
JavaScript执行机制详细介绍
Dec 06 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 #Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 #Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 #Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 #Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 #Javascript
jQuery插件WebUploader实现文件上传
Nov 07 #Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 #Javascript
You might like
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
php一次性删除前台checkbox多选内容的方法
2013/09/22 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
JS判断数组那点事
2017/10/10 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
python解释器安装教程的方法步骤
2020/07/02 Python
区分python中的进程与线程
2020/08/13 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
英语翻译系毕业生求职信
2013/09/29 职场文书
毕业生找工作的自我评价
2013/10/18 职场文书
2015年少先队活动总结
2015/03/25 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL