@RestController
public class FileUploadController {
@RequestMapping(
value =
"fileUpload",method = RequestMethod.
POST)
public String
fileUpload(
@RequestParam(
"file") MultipartFile file)
throws IOException
, MyException {
if(file!=
null){
System.
out.println(
"multipartFile = " + file.getName()+
"|"+file.getSize())
;
}
String configFile =
this.getClass().getResource(
"/tracker.conf").getFile()
;
ClientGlobal.
init(configFile)
;
TrackerClient trackerClient=
new TrackerClient()
;
TrackerServer trackerServer=trackerClient.getConnection()
;
StorageClient storageClient=
new StorageClient(trackerServer
,null)
;
String filename= file.getOriginalFilename()
;
String extName = StringUtils.
substringAfterLast(filename
, ".")
;
String[] upload_file = storageClient.upload_file(file.getBytes()
, extName
, null)
;
String fileUrl=
"";
for (
int i =
0; i < upload_file.
length; i++) {
String path = upload_file[i]
;
fileUrl+=
"/"+path
;
}
return "http://file.service.com"+fileUrl
;
}
需要在resource目录下建立tracker.conf文件
tracker_server=192.168.220.129:22122
# 连接超时时间，针对socket套接字函数connect，默认为30秒
connect_timeout=
30000
# 网络通讯超时时间，默认是60秒
network_timeout=
60000
<!DOCTYPE html>
<html lang="UTF-8">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/doc.min.css">
<link rel="stylesheet" href="webuploader/webuploader.css">
<style>
.
tree li {
list-style-type:
none;
cursor:
pointer;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div><a class="navbar-brand" style="font-size:
32px;" href="user.html">教师平台 -
添加讲师</a></div>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li style="padding-top:
8px;">
<div class="btn-group">
<button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i> 管理员 <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
<li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
<li class="divider"></li>
<li><a href="login.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
</ul>
</div>
</li>
<li style="margin-left:
10px;padding-top:
8px;">
<button type="button" class="btn btn-default btn-danger">
<span class="glyphicon glyphicon-question-sign"></span> 帮助
</button>
</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<div class="tree">
<ul style="padding-left:
0px;" class="list-group">
<li class="list-group-item tree-closed" >
<a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
</li>
<li class="list-group-item">
<span><i class="glyphicon glyphicon-ok"></i> 教师管理 <span class="badge" style="float:
right">3
</span></span>
<ul style="margin-top:
10px;">
<li style="height:
30px;">
<a href="http://www.teacher.com/add.html" style="color:
red;"><i class="glyphicon glyphicon-check"></i> 添加讲师</a>
</li>
<li style="height:
30px;">
<a href="http://www.teacher.com/index.html"><i class="glyphicon glyphicon-check"></i>教师列表</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">数据列表</a></li>
<li class="active">新增</li>
</ol>
<div class="panel panel-default">
<div class="panel-heading">表单数据<div style="float:
right;cursor:
pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
<div class="panel-body">
<form role="form" id="teacherForm" method="post" action="http://www.teacher.com/addTeacher.do">
<div class="form-group">
<label for="name">讲师名称</label>
<input type="text" class="form-control" id="name" name="name" placeholder="请输入讲师名称">
</div>
<div class="form-group">
<label for="education">讲师资历</label>
<input type="text" class="form-control" id="education" name="education" placeholder="请输入讲师资历">
</div>
<div class="form-group">
<label for="subjectId">讲师专业</label>
<input type="text" class="form-control" id="subjectId" name="subjectId" placeholder="请输入讲师专业-数字专业学号ID">
</div>
<div class="form-group">
<label for="isStar">讲师等级</label>
<select id="isStar" name="isStar" class="btn btn-default dropdown-toggle" style="color:
#ff0000;" style="height:
500px;" style="width:
110px;">
<option value="1">高级讲师</option>
<option value="2">首席讲师</option>
</select>
</div>
<div class="form-group">
<label for="career">讲师简介</label>
<input height="500px" type="text" class="form-control" id="career" name="career" placeholder="请输入讲师简介">
</div>
<div class="form-group">
<label for="sort">讲师排序</label>
<input height="500px" type="text" class="form-control" id="sort" name="career" placeholder="请输入教师排序-数字类型">
</div>
<div class="form-group">
<label for="picPath">上传的图片</label>
<input id="picPath" type="hidden" name="picPath">
<div id="fileList" class="uploader-list"></div>
<button type="button" id="checked">选择图片</button>
<button type="button" id="ImgUploadBtn">上传图片</button>
</div>
<button type="button" id="saveBtn" class="btn btn-success"><i class="glyphicon glyphicon-plus"></i> 新增</button>
<button type="button" id="resetBtn" class="btn btn-danger"><i class="glyphicon glyphicon-refresh"></i> 重置</button>
</form>
<!--<div id="uploadImgs">
<a href="#" id="ImgAdd" class="modal-title" iconCls="icon-add" plain="true">添加图片</a>
<a href="#" id="ImgUploadBtn" class="modal-title" iconCls="icon-save" plain="true" >图片上传</a><br>
<a href="#" class="modal-title" iconCls="icon-remove" plain="true">删除</a>
</div>-->
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close
</span></button>
<h4 class="modal-title" id="myModalLabel">帮助</h4>
</div>
<div class="modal-body">
<div class="bs-callout bs-callout-info">
<h4>测试标题1
</h4>
<p>测试内容1
，测试内容1
，测试内容1
，测试内容1
，测试内容1
，测试内容1
</p>
</div>
<div class="bs-callout bs-callout-info">
<h4>测试标题2
</h4>
<p>测试内容2
，测试内容2
，测试内容2
，测试内容2
，测试内容2
，测试内容2
</p>
</div>
</div>
<!--
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
-->
</div>
</div>
</div>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
<script src="webuploader/webuploader.js"></script>
<script src="jquery/layer/layer.js"></script>
<script src="jquery/jquery.pagination.js"></script>
<script src="jquery/jquery-form.min.js"></script>
<script type="text/javascript">
$(
function () {
$(
".list-group-item").
click(
function(){
if (
$(
this).
find(
"ul") ) {
$(
this).
toggleClass(
"tree-closed")
;
if (
$(
this).
hasClass(
"tree-closed") ) {
$(
"ul", this).
hide(
"fast")
;
}
else {
$(
"ul", this).
show(
"fast")
;
}
}
})
;
initUploader()
;
})
;
function initUploader() {
//首先创建Web Uploader实例
var uploader =
WebUploader.
create({
auto:
false, // 选完文件后，是否自动上传
swf:
'js/Uploader.swf', // swf文件路径
server:
'fileUpload', // 文件接收服务端
pick:
'#checked', // 选择文件的按钮。可选
duplicate:
true,// 重复上传图片，true为可重复false为不可重复
// 只允许选择图片文件。
accept: {
title:
'Images',
extensions:
'gif,jpg,jpeg,bmp,png',
mimeTypes:
'image/*'
}
})
;
//接着监听fileQueued事件，即当有文件添加进来的时候，通过uploader.makeThumb来创建图片预览图。
uploader.
on(
'fileQueued', function (file) {
var $list =
$(
"#fileList")
,
$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)
;
// 创建缩略图
uploader.
makeThumb(file
, function (error
, src) {
if (error) {
$img.
replaceWith(
'<span>不能预览</span>')
;
return;
}
$img.
attr(
'src', src)
;
}
, 100, 100)
; //100x100为缩略图尺寸
})
;
// 文件上传过程中创建进度条实时显示。
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, res ) {
console.log(res.filePath);//这里可以得到上传后的文件路径
$( '#'+file.id ).addClass('upload-state-done');
});*/
console.
log(
"初始化文件上传控件的响应--uploadSuccess")
;
uploader.
on(
'uploadSuccess', function (file
, response) {
console.
log(
"上传完成：" + file.
id +
"||" + response.
_raw)
;
var fileId = file.
id;
var url = response.
_raw;
$(
"#picPath").
val(url)
;
})
;
// 文件上传失败，显示上传出错。
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()
;
})
;
$(
'#ImgUploadBtn').
click(
function () {
console.
log(
"开始上传")
;
if (uploader.
getFiles().
length <=
0) {
layer.
msg(
"上传图片失败", {
time:
1000, icon:
5, shift:
6})
;
return;
}
uploader.
upload()
;
layer.
msg(
"上传图片成功", {
time:
1000, icon:
6, shift:
6})
;
})
;
}
$(
function(){
$(
"#saveBtn").
click(
function(){
var loadingIndex=-
1;
var options = {
url:
"http://www.teacher.com/addTeacher.do",
beforeSubmit :
function(){
loadingIndex =
layer.
msg(
'数据正在保存中', {
icon:
6})
;
return true ; //必须返回true,否则,请求终止.
}
,
success :
function(result){
layer.
close(loadingIndex)
;
if(result.
success){
layer.
msg(
"教师数据保存成功", {
time:
1000, icon:
6})
;
window.
location.
href=
"http://www.teacher.com/index.html";
}
else{
layer.
msg(
"教师数据保存失败", {
time:
1000, icon:
5, shift:
6})
;
}
}
}
;
$(
"#teacherForm").
ajaxSubmit(options)
; //异步提交
return ;
})
;
})
;
$(
"#resetBtn").
click(
function(){
$(
"#uteacherForm")[
0].
reset()
;
})
;
</script>
</body>
</html>
@RequestMapping(
"add.html")
public String
toAdd() {
return "add";
}
@RequestMapping(
value =
"addTeacher.do", method = RequestMethod.
POST)
@ResponseBody
public AjaxResult
saveTeacher(EduTeacher eduTeacher) {
AjaxResult result =
new AjaxResult()
;
try {
teacherService.saveTeacher(eduTeacher)
;
result.setSuccess(
true)
;
}
catch (Exception e) {
e.printStackTrace()
;
result.setSuccess(
false)
;
}
return result
;
}
