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中各浏览器中鼠标按键值的差异
Apr 07 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
angular中的post请求处理示例详解
Jun 30 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
浅析JavaScript中的typeof运算符
2013/11/30 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
JavaScript中offsetWidth的bug及解决方法
2017/05/17 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
使用Angular CLI生成路由的方法
2018/03/24 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
jquery登录的异步验证操作示例
2019/05/09 jQuery
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
python正则表达式re之compile函数解析
2017/10/25 Python
python在文本开头插入一行的实例
2018/05/02 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
numpy 对矩阵中Nan的处理:采用平均值的方法
2018/10/30 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python实现图片转字符画的完整代码
2021/02/21 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
三爱活动实施方案
2014/03/19 职场文书
青春无悔演讲稿
2014/05/08 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
城管个人总结
2015/02/28 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
MySQL注入基础练习
2021/05/30 MySQL
PO模式在selenium自动化测试框架的优势
2022/03/20 Python