使用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 弹出框 替代浏览器的弹出框
Oct 29 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
浅谈JavaScript中运算符的优先级
Jul 07 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
Node.js学习入门
Jan 03 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
关于Layui Table隐藏列问题
Sep 16 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基于mcrypt的加密解密实例
2014/10/27 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
动态加载js的几种方法
2006/10/23 Javascript
JS对URL字符串进行编码/解码分析
2008/10/25 Javascript
JavaScript学习点滴 call、apply的区别
2010/10/22 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
JS获取地址栏参数的几种方法小结
2014/02/28 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
简单了解Backbone.js的Model模型以及View视图的源码
2016/02/14 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(一)
2016/05/17 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
2017/01/19 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
create-react-app中添加less支持的实现
2019/11/15 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
浅谈Python中的数据类型
2015/05/05 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
中软国际Java程序员机试题
2012/08/19 面试题
信用社实习人员自我鉴定
2013/09/20 职场文书
法学毕业生自荐信
2013/11/13 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
校园开放日新闻稿
2015/07/17 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
Python基础 括号()[]{}的详解
2021/11/07 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers