使用Web Uploader实现多文件上传


Posted in Javascript onJune 08, 2016

引入资源

使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。

<!--引入CSS--> 
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> 
<!--引入JS--> 
<script type="text/javascript" src="webuploader文件夹/webuploader.js">
</script>
<!--SWF在初始化的时候指定,在后面将展示-->

文件上传

WebUploader只包含文件上传的底层实现,不包括UI部分。所以交互方面可以自由发挥,以下将演示如何去实现一个简单的版本。

请点击下面的选择文件按钮,然后点击开始上传体验此Demo。

Html部分

首先准备dom结构,包含存放文件信息的容器、选择按钮和上传按钮三个部分。

<div id="uploader" class="wu-example"> 
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list">
</div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button> 
</div> 
</div>

初始化Web Uploader

具体说明,请看一下代码中的注释部分。

var uploader = WebUploader.create({ 
// swf文件路径 swf: BASE_URL + '/js/Uploader.swf', 
// 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php', 
// 选择文件的按钮。
可选。 
// 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! 
resize: false });

显示用户选择

由于webuploader不处理UI逻辑,所以需要去监听fileQueued事件来实现。

// 当有文件被添加进队列的时候 uploader.on( 'fileQueued', function( file )
{ $list.append( '<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>' ); });

文件上传进度

文件上传中,Web Uploader会对外派送uploadProgress事件,其中包含文件对象和该文件当前上传进度。

// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage )
{ var $li = $( '#'+file.id ), $percent = $li.find('.progress .progress-bar'); 
// 避免重复创建 if ( !$percent.length ) 
{ $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo( $li ).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css( 'width', percentage * 100 + '%' ); });

文件成功、失败处理

文件上传失败会派送uploadError事件,成功则派送uploadSuccess事件。不管成功或者失败,在文件上传完后都会触发uploadComplete事件。

uploader.on( 'uploadSuccess', function( file ) 
{ $( '#'+file.id ).find('p.state').text('已上传'); 
}); uploader.on( 'uploadError', function( file )
{ $( '#'+file.id ).find('p.state').text('上传出错'); 
}); uploader.on( 'uploadComplete', function( file )
{ $( '#'+file.id ).find('.progress').fadeOut(); 
});

图片上传

与普通文件上传相比,此demo演示了:文件过滤,图片预览,图片压缩上传等功能。

Html

要实现如上demo,首先需要准备一个按钮,和一个用来存放添加的文件信息列表的容器。

<!--dom结构部分-->
<div id="uploader-demo"> 
<!--用来存放item-->
<div id="fileList" class="uploader-list">
</div> <div id="filePicker">选择图片</div>
</div>

Javascript

创建Web Uploader实例

// 初始化Web Uploader var uploader = WebUploader.create({ // 选完文件后,是否自动上传。
auto: true, // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。
server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。
可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。
accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } });

监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。

PS: 这里得到的是Data URL数据,IE6、IE7不支持直接预览。可以借助FLASH或者服务端来完成预览。

// 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file )
{ var $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 ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 
// thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) 
{
if ( error ) 
{ 
$img.replaceWith('<span>不能预览</span>'); return; 
} $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight ); });

然后剩下的就是上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应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 )
{ $( '#'+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实现多文件上传的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
javascript实现回车键提交表单方法总结
Jan 10 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
Sep 15 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
浅析JSONP技术原理及实现
Jun 08 #Javascript
JSONP原理及简单实现
Jun 08 #Javascript
Javascript必知必会(四)js类型转换
Jun 08 #Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 #Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 #Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 #Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 #Javascript
You might like
利用PHP动态生成VRML网页
2006/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
php 面向对象的一个例子
2011/04/12 PHP
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
java script编程起步(第三课)
2007/01/10 Javascript
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
介绍Python中几个常用的类方法
2015/04/08 Python
python算法演练_One Rule 算法(详解)
2017/05/17 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
Python数据可视化图实现过程详解
2020/06/12 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
大学生创业感言
2014/01/25 职场文书
高三自我评价
2014/02/01 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2014年高一班主任工作总结
2014/12/05 职场文书
结婚幸福感言
2015/08/01 职场文书
正则表达式拆分url实例代码
2022/02/24 Java/Android