webuplader是百度的一个前端开源上传插件,支持加密、分片上传。还是阔以的。
不过文档写的实在是不敢恭维,挫到爆,gettting start介绍快速开始,写的都是缺少东西的,直接复制下来是不可以运行的。
总结出一个经验,测试html最好还是使用jsp,不然修改了页面,浏览器上总是有缓存,清缓存是个很蛋疼的事情。
1. 引如外部资源 css,js文件
这里${ctxStatic}不要管,这个只是spring项目中使用el表达式来写静态文件前缀了。使用的话,测试的话直接写死绝对路即可。
- <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="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
- <span style="font-size:14px;"><div id="uploader-demo">
-
- <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组件,设置上传等事件监听。
- <span style="font-size:14px;"><script type="text/javascript">
- $(function(){
-
- var $list=$("#thelist");
- var $btn =$("#ctlBtn");
- var thumbnailWidth = 100;
- var thumbnailHeight = 100;
-
- var uploader = WebUploader.create({
-
- auto: false,
-
-
- swf: '${ctxStatic }/webupload/Uploader.swf',
-
-
- server: '/apm-web/a/test/',
-
-
-
- pick: '#filePicker',
-
-
- accept: {
- title: 'Images',
- extensions: 'gif,jpg,jpeg,bmp,png',
- mimeTypes: 'image/*'
- },
- method:'POST',
- });
-
- 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.append( $li );
-
-
-
-
- uploader.makeThumb( file, function( error, src ) {
- 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 + '%' );
- });
-
-
- 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>