使用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 相关文章推荐
jqTransform form表单美化插件使用方法
Jul 05 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JavaScript电子时钟倒计时
Jan 09 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 Javascript
ES6中Generator与异步操作实例分析
Mar 31 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 Javascript
html实现随机点名器的示例代码
Apr 02 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
DC游戏Steam周三特惠 《蝙蝠侠》阿卡姆系列平史低
2020/04/09 欧美动漫
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
获取PHP警告错误信息的解决方法
2013/06/03 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP实现从上往下打印二叉树的方法
2018/01/18 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
Cookie 小记
2010/04/01 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
2014/07/01 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python栈的基本定义与使用方法示例【初始化、赋值、入栈、出栈等】
2019/10/24 Python
python实现与redis交互操作详解
2020/04/21 Python
Django中文件上传和文件访问微项目的方法
2020/04/27 Python
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
城市规划毕业生求职信
2013/10/10 职场文书
团员学习总结的自我评价范文
2013/10/14 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
公司担保书范文
2014/05/21 职场文书
成绩报告单家长评语
2014/12/30 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python