Step One 引入依賴
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>
Step Two 配置文件解析對象
@Bean(name="multipartResolver")
public MultipartResolver multipartResolver(){
return new CommonsMultipartResolver();
}
Step Three jsp兼樣式
<style type="text/css">
#progressBar {
width: 300px;
height: 20px;
border: 1px #EEE solid;
}
#progress {
width: 0%;
height: 20px;
background-color: lime;
}
.form {
margin: 10px 345px;
}
</style>
<body>
<div class="modal-body form ">
<form id="dialogForm" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-3 control-label">版本號:
</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<input type="text" class="form-control " placeholder="請輸入版本號"
id="version">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-3 control-label">部門:
</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<input type="file" name="file" id="file" onchange="upload()">
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-3 control-label">上傳進度:
</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<!--進度條部分(默認隱藏)-->
<div class="progress-body">
<span style="display: inline-block; text-align: right"></span>
<progress></progress>
<percentage>0%</percentage>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-sm-3 col-xs-3 control-label">版本修改內容:
</label>
<div class="col-md-7 col-sm-7 col-xs-7">
<textarea rows="3" cols="47" id="description"></textarea>
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn blue" id="addBtn"
style="background: #11C2EE; color: #fff">提交</button>
</div>
</div>
<input type="text" hidden="true" id="appUrl">
</body>
Step four js(需引入jquery)
function upload() {
// 驗證文件內容
var file = $("#file")[0].files[0];
if (!file.name.endWith(".apk")) {
alert("請選擇.apk文件");
return;
}
// 上傳
doIt()
}
function doIt() {
var formData = new FormData();
formData.append("file", $("#file")[0].files[0]);
$.ajax({
contentType : "multipart/form-data",
url : "/mote/app/upload.action",
type : "POST",
data : formData,
processData : false, // 告訴jQuery不要去處理髮送的數據
contentType : false, // 告訴jQuery不要去設置Content-Type請求頭
success : function(data) {
$("#appUrl").val(data); // 保存文件路徑
},
xhr : function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
//處理進度條的事件
xhr.upload.addEventListener("progress", progressHandle,
false);
//加載完成的事件
xhr.addEventListener("load", completeHandle, false);
//加載出錯的事件
xhr.addEventListener("error", failedHandle, false);
return xhr;
}
}
});
}
//進度條更新
function progressHandle(e) {
$('.progress-body progress').attr({
value : e.loaded,
max : e.total
});
var percent = e.loaded / e.total * 100;
$('.progress-body percentage').html(percent.toFixed(2) + "%");
};
//上傳完成處理函數
function completeHandle(e) {
console.log("上傳完成");
};
//上傳出錯處理函數
function failedHandle(e) {
console.log("上傳失敗");
};
String.prototype.endWith = function(endStr) {
var d = this.length - endStr.length;
return (d >= 0 && this.lastIndexOf(endStr) == d)
}
// 添加內容
$("#addBtn").click(function() {
var params = {
version : $("#version").val(),
url : $("#appUrl").val(),
description : $("#description").val()
}
$.ajax({
url : "/mote/app/add.action",
data : JSON.stringify(params),
type : "POST",
contentType : "application/json",
success : function(data) {
if (data == -1)
alert("該版本已存在")
if (data == 1)
alert("上傳成功")
},
error : function(data) {
alert("服務器繁忙");
}
});
});
Step five Controller代碼
@PostMapping("/upload")
@ResponseBody
public ResponseEntity<String> fileUpload(
@RequestParam("file") MultipartFile file, HttpServletRequest request) {
// 判斷文件是否有內容
if (file.isEmpty())
return new ResponseEntity<String>(Constant.isEmpty, HttpStatus.OK);
try {
// 獲取文件名稱
String fileName = file.getOriginalFilename();
// 定義上傳路徑
// System.getProperty("file.separator") 根據系統獲取分隔符
String path = request.getSession().getServletContext()
.getRealPath("");
String contextPath = request.getContextPath();
path = path.replace(contextPath.substring(1), "") + "apkDir"
+ System.getProperty("file.separator") + fileName;
// 根據文件的全路徑名字(含路徑、後綴),new一個File對象dest
File dest = new File(path);
// 如果該文件的上級文件夾不存在，則創建
if (!dest.getParentFile().exists()) {
dest.getParentFile().mkdirs();
}
// 向指定路徑寫入文件
file.transferTo(dest);
// 返回文件訪問路徑
String url = request.getScheme() + "://" + request.getServerName()
+ ":" + request.getServerPort() + "/apkDir/" + fileName;
return new ResponseEntity<String>(url, HttpStatus.OK);
} catch (Exception e) {
log.info("文件上傳失敗" + e);
}
return new ResponseEntity<String>(Constant.upload_fail, HttpStatus.OK);
}
@PostMapping("/add")
@ResponseBody
public ResponseEntity<Integer> addV(@RequestBody App app) {
try {
// 驗證版本是否存在
int count = uploadService.getApp(app.getVersion());
if (count > Constant.ZERO)
return new ResponseEntity<Integer>(Constant.ERROR,
HttpStatus.OK);
// 設置時間
app.setTimestamp(new Date().getTime());
int numb = uploadService.addV(app);
if (numb == Constant.ONE)
return new ResponseEntity<Integer>(Constant.OK, HttpStatus.OK);
} catch (Exception e) {
log.info("添加app失敗！！！" + e);
}
return new ResponseEntity<Integer>(HttpStatus.INTERNAL_SERVER_ERROR);
}
附錄 Constant類
public class Constant {
public static final int OK = 1;
public static final int ERROR = -1;
public static final int ZERO = 0;
public static final int ONE = 1;
public static final int TWO = 2;
public static final int THREE = 3;
public static final String isEmpty = "0";
public static final String isExit = "-2";
public static final String upload_fail = "-1";
}
記錄用的 寫的不是很用心，有問題的請留言，謝謝
