Webuploader教程(一)------简单实用上传功能
2017-06-13 15:10
405 查看
webuplader是百度的一个前端开源上传插件,支持加密、分片上传。还是阔以的。
不过文档写的实在是不敢恭维,挫到爆,gettting start介绍快速开始,写的都是缺少东西的,直接复制下来是不可以运行的。
总结出一个经验,测试html最好还是使用jsp,不然修改了页面,浏览器上总是有缓存,清缓存是个很蛋疼的事情。
1. 引如外部资源 css,js文件
这里${ctxStatic}不要管,这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话,测试的话直接写死绝对路即可。
[html] view
plain copy
<span style="font-size:14px;"> <link href="${ctxStatic }/bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<link href="${ctxStatic }/webupload/css/webuploader.css" type="text/css" rel="stylesheet"/>
<script type
4000
="text/javascript" src="${ctxStatic }/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/webupload/webuploader.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></span>
2.写容器DOM
用来放置webuploader的dom
[html] view
plain copy
<span style="font-size:14px;"><div id="uploader-demo">
<!--用来存放item-->
<div id="thelist" class="uploader-list"></div>
<div>
<div id="filePicker">选择图片</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</span>
3. 初始化webuploader组件,设置上传等事件监听。
[javascript] view
plain copy
<span style="font-size:14px;"><script type="text/javascript">
$(function(){
/*init webuploader*/
var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明,好蛋疼。
var $btn =$("#ctlBtn"); //开始上传
var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: false,
// swf文件路径
swf: '${ctxStatic }/webupload/Uploader.swf',
// 文件接收服务端。
server: '/apm-web/a/test/',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。
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 ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
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();
});
$btn.on( 'click', function() {
console.log("上传...");
uploader.upload();
console.log("上传成功");
});
});
</script></span>
不过文档写的实在是不敢恭维,挫到爆,gettting start介绍快速开始,写的都是缺少东西的,直接复制下来是不可以运行的。
总结出一个经验,测试html最好还是使用jsp,不然修改了页面,浏览器上总是有缓存,清缓存是个很蛋疼的事情。
1. 引如外部资源 css,js文件
这里${ctxStatic}不要管,这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话,测试的话直接写死绝对路即可。
[html] view
plain copy
<span style="font-size:14px;"> <link href="${ctxStatic }/bootstrap-3.3.5-dist/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
<link href="${ctxStatic }/webupload/css/webuploader.css" type="text/css" rel="stylesheet"/>
<script type
4000
="text/javascript" src="${ctxStatic }/jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/webupload/webuploader.min.js"></script>
<script type="text/javascript" src="${ctxStatic }/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script></span>
2.写容器DOM
用来放置webuploader的dom
[html] view
plain copy
<span style="font-size:14px;"><div id="uploader-demo">
<!--用来存放item-->
<div id="thelist" class="uploader-list"></div>
<div>
<div id="filePicker">选择图片</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
</span>
3. 初始化webuploader组件,设置上传等事件监听。
[javascript] view
plain copy
<span style="font-size:14px;"><script type="text/javascript">
$(function(){
/*init webuploader*/
var $list=$("#thelist"); //这几个初始化全局的百度文档上没说明,好蛋疼。
var $btn =$("#ctlBtn"); //开始上传
var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
var thumbnailHeight = 100;
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: false,
// swf文件路径
swf: '${ctxStatic }/webupload/Uploader.swf',
// 文件接收服务端。
server: '/apm-web/a/test/',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#filePicker',
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
},
method:'POST',
});
// 当有文件添加进来的时候
uploader.on( 'fileQueued', function( file ) { // webuploader事件.当选择文件后,文件被加载到文件队列中,触发该事件。等效于 uploader.onFileueued = function(file){...} ,类似js的事件定义。
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 ) { //webuploader方法
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传过程中创建进度条实时显示。
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();
});
$btn.on( 'click', function() {
console.log("上传...");
uploader.upload();
console.log("上传成功");
});
});
</script></span>
相关文章推荐
- Webuploader教程(一)------简单实用上传功能
- [转-qq_34531925]Webuploader教程(一)——简单实用上传功能
- Webuploader教程(一)------简单实用上传功能
- Webuploader教程(一)------简单实用上传功能
- Web Uploader 功能齐全完美兼容 IE 的上传组件
- 使用WebUploader上传文件,,简单的配置过程
- 功能强大的文件上传插件带上传进度-WebUploader
- webuploader-功能强大的HTML5上传组件
- webuploader 实现图片批量上传功能附实例代码
- .NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身,非常实用的功能
- 功能强大的文件上传插件带上传进度-WebUploader
- Node初学者入门,一本全面的NodeJS教程,微小的web框架,能实现文件上传功能以及数据解析功能
- webuploader实现批量图片上传功能
- 百度上传插件WEB UPLOADER教程_WEB UPLOADER使用DEMO实例
- .NET快速信息化系统开发框架 V3.2->Web版本新增“文件管理中心”集上传、下载、文件共享等一身,非常实用的功能
- Web Uploader - 功能齐全,完美兼容 IE 的上传组件
- 功能强大的HTML5上传组件-Web Uploader
- WebUploader+SpringMVC实现文件上传功能
- Java与WebUploader相结合实现文件上传功能(实例代码)
- HTML5功能强大的上传组件-Web Uploader