百度WebUploader插件上传文件

使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF。

<link rel="stylesheet" type="text/css"
href="${base}/assets/global/plugins/webuploader/webuploader.css" />

<script src="${base }/assets/global/plugins/webuploader/webuploader.js" type="text/javascript"></script>

var initWebUploader = function() {
var $ = jQuery,
$list = $('#thelist'),
$btn = $('#ctlBtn'),
state = 'pending',
uploader;
uploader = WebUploader.create({
// swf文件路径
swf: ctx + '/assets/global/plugins/webuploader/Uploader.swf',
// 文件接收服务端。
server: ctx + '/teach/attend-upload.do',
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
pick: '#picker',
//设置input的name属性，不设置默认为file
//      fileVal:'upload',
// 不压
4000
缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
resize: false
});
uploader.on( 'fileQueued', function( file ) {
addFile(file);
});
uploader.on( 'fileDequeued', function( file ) {
var $li = $('#'+file.id);
$li.remove();
});
// 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress');

// 避免重复创建
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('td.state').text('上传中');
$li.find('.progress span').html(parseInt(percentage*100) +"%");
//      $percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file,response ) {
if(response.result == "文件过大!") {
$( '#'+file.id ).find('td.state').text('文件过大');
}
if(response.result == "上传成功!") {
$( '#'+file.id ).find('td.state').text('已上传');
//上传成功延迟两秒后关闭
setTimeout(function () {uploader.removeFile( file )}, 2000);
}
});

uploader.on( 'uploadError', function( file,reason ) {
$( '#'+file.id ).find('td.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();
}
});
function addFile(file) {
var $li = $( '<tr id="' + file.id + '">' +
'<td class="info">' + file.name + '</td>' +
'<td class="state">等待上传...</td>'+
'<td class="progress"><span></span></td>' +
'</tr>' ),
$btns = $('<td class="file-panel">' +
'<span class="cancel">删除</span></td>').appendTo( $li );
$btns.on( 'click', 'span', function() {
uploader.removeFile( file );
});
$li.appendTo( $list);
}

}

var ioc = {
tmpFilePool : {
type : 'org.nutz.filepool.NutFilePool',
// 临时文件最大个数为 1000 个
args : [ "D:/Work/data/log", 1000 ]
},
uploadFileContext : {
type : 'org.nutz.mvc.upload.UploadingContext',
singleton : false,
args : [ {
refer : 'tmpFilePool'
} ],
fields : {
// 是否忽略空文件, 默认为 false
ignoreNull : true,
// 单个文件最大尺寸(大约的值，单位为字节，即 1048576 为 1M)
//          maxFileSize : 1048576,
// 正则表达式匹配可以支持的文件名
// nameFilter : '^(.+[.])(xls)$'
}
},
myUpload : {
type : 'org.nutz.mvc.upload.UploadAdaptor',
singleton : false,
args : [ {
refer : 'uploadFileContext'
} ]
}
};

@At("/teach/attend-upload")
@AdaptBy(type = UploadAdaptor.class, args = { "ioc:myUpload" })
@Ok("raw:json")
public String uploadFile(@Param("file")TempFile tf){
return attendService.uploadFile(tf);
}

public String uploadFile(TempFile tf) {
Map<String, Object> map = new HashMap<>();
if(tf.getSize() >= 62914560) {
map.put( "result", "文件过大!" );
return Json.toJson( map );
}
UploadFile uf = new UploadFile();
if(tf == null || "".equals( tf ) ){
map.put( "result", "上传失败!" );
return Json.toJson( map );
}
try {
System.out.println(tf.getSubmittedFileName());
System.out.println(tf.getSize());
String[] postfix = tf.getSubmittedFileName().split("\\.");
String path = "D:\\data\\user\\";
File temp = new File( path );
if(!temp.exists()){
temp.mkdirs();
}
System.out.println(temp.getPath());
System.out.println(postfix[postfix.length - 2]);
System.out.println(postfix[postfix.length - 1]);
tf.write( temp.getPath() + "\\"  + postfix[postfix.length - 2] + "." + postfix[postfix.length - 1]);
uf.setNewFileName(temp.getPath() + "\\"  + postfix[postfix.length - 2] + "." + postfix[postfix.length - 1]);
uf.setOldFileName(tf.getSubmittedFileName());
dao().insert(uf);
tf.delete();
map.put( "result", "上传成功!" );
}
catch( Exception e ) {
e.printStackTrace();
map.put( "result", "上传失败!" );
}
return Json.toJson( map );
}