使用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 相关文章推荐
javascript编程起步(第四课)
Feb 27 Javascript
javascript 禁止复制网页
Jun 11 Javascript
js Date概念详细介绍
Nov 22 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
javascript中mouseover、mouseout使用详解
Jul 19 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
深入理解基于vue-cli的vuex配置
Jul 24 Javascript
了解JavaScript表单操作和表单域
May 27 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 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框架排名
2013/07/04 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP以json或xml格式返回请求数据的方法
2018/05/31 PHP
Add a Table to a Word Document
2007/06/15 Javascript
在javaScript中关于submit和button的区别介绍
2013/10/20 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
利用jquery和BootStrap实现动态滚动条效果
2018/12/03 jQuery
three.js搭建室内场景教程
2018/12/30 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
Python字典的核心底层原理讲解
2019/01/24 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
天网面试题
2013/04/07 面试题
公司委托书范本
2014/04/04 职场文书
员工保密承诺书
2014/05/28 职场文书
总经理任命书范本
2014/06/05 职场文书
医院营销工作计划
2015/01/16 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技