webuploader java版本_webuploaderjava版 上传文件

jsp+springmvc

后台代码一样

前台代码

var baseUrl = '${pageContext.request.contextPath }';

//文件上传

jQuery(function() {

var $ = jQuery,

$list = $('#thelist'),

$btn = $('#ctlBtn'),

state = 'pending',

uploader;

uploader = WebUploader.create({

// 不压缩image

resize: false,

// swf文件路径

swf: baseUrl+'js/Uploader.swf',

// 文件接收服务端。

server: baseUrl+'/files/addImg',

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#picker'

});

// 当有文件添加进来的时候

uploader.on( 'fileQueued', function( file ) {

$list.append( '

' +

'

' + file.name + '

' +

'

等待上传...

' +

'

' );

});

// 文件上传过程中创建进度条实时显示。

uploader.on( 'uploadProgress', function( file, percentage ) {

var $li = $( '#'+file.id ),

$percent = $li.find('.progress .progress-bar');

// 避免重复创建

if ( !$percent.length ) {

$percent = $('

' +

'

' +

'

' +

'

').appendTo( $li ).find('.progress-bar');

}

$li.find('p.state').text('上传中');

$percent.css( 'width', percentage * 100 + '%' );

});

uploader.on( 'uploadSuccess', function( file,response ) {

$( '#'+file.id ).find('p.state').text('已上传');

});

uploader.on( 'uploadError', function( file,reason ) {

$( '#'+file.id ).find('p.state').text('上传出错');

});

uploader.on( 'uploadComplete', function( file ) {

$( '#'+file.id ).find('.progress').fadeOut();

});

uploader.on( 'all', function( type ) {

if ( type === 'startUpload' ) {

state = 'uploading';

} else if ( type === 'stopUpload' ) {

state = 'paused';

} else if ( type === 'uploadFinished' ) {

state = 'done';

}

if ( state === 'uploading' ) {

$btn.text('暂停上传');

} else {

$btn.text('开始上传');

}

});

$btn.on( 'click', function() {

if ( state === 'uploading' ) {

uploader.stop();

} else {

uploader.upload();

}

});

});

文件上传示例

选择文件

开始上传