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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
JS实现的生成随机数的4个函数分享
Feb 11 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
Angular value与ngValue区别详解
Nov 27 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
sony ICF-2010 拆解与改装
2021/03/02 无线电
PHP 编程安全性小结
2010/01/08 PHP
php中经典方法实现判断多维数组是否为空
2011/10/23 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
玩转方法:call和apply
2014/05/08 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python数据类型详解(一)字符串
2016/05/08 Python
Python 中 Virtualenv 和 pip 的简单用法详解
2017/08/18 Python
python实现最小二乘法线性拟合
2019/07/19 Python
详解python中__name__的意义以及作用
2019/08/07 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
行政专员的岗位职责
2014/03/10 职场文书
公司委托书格式范本
2014/09/16 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
CSS 伪元素::marker详解
2021/06/26 HTML / CSS