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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
客户端js判断文件类型和文件大小即限制上传大小
Nov 20 Javascript
js函数在frame中的相互调用详解
Mar 03 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
vue封装一个简单的div框选时间的组件的方法
Jan 06 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP 加密解密内部算法
2010/04/22 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
vue 实现边输入边搜索功能的实例讲解
2018/09/16 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
了解不常见但是实用的Python技巧
2019/05/23 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
django自带调试服务器的使用详解
2019/08/29 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
Python pandas如何向excel添加数据
2020/05/22 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
Argos官网:英国家喻户晓的百货零售连锁商
2017/04/03 全球购物
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
承诺书范文
2014/06/03 职场文书
旷工检讨书1000字
2015/01/01 职场文书
教师党员个人总结
2015/02/10 职场文书
节约用电倡议书
2015/04/28 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
高中物理教学反思
2016/02/19 职场文书
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技