時間：2019.12.02.19.24
本博客實現的內容是利用JS代碼實現在前端彈出對話框，選取對話框的文件，然後通過ajax的方式傳輸給後端，具體實現見代碼
具體流程：文件---->數據流—>hex（十六進制的字符串）----->傳輸到後端---->java解析爲byte[]--------->保存爲對應的文件
JS代碼
transferFileToBackend.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>傳輸數據到後端</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="js.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div id="header"></div>
<div id="option">
<form id="publish_s3m">
<fieldset>
<p id="getFile">
<input type="file" id="btn_getFilePath" style="width: 220px" multiple="multiple">
</p>
</fieldset>
</form>
</div>
</body>
</html>
js.js
$(document).ready(function () {
/**
* 將前端選中的文件傳輸到後端
* 時間：2019.12.02.16.44
*/
$("#btn_getFilePath").change(function(){
var objFiles = document.getElementById("btn_getFilePath");
var fileSize = objFiles.files.length;
for (var i = 0; i < fileSize; i++) {
var isFileValide = true; // 交互click和ajax之間的信息
var reader = new FileReader();
reader.readAsArrayBuffer(objFiles.files[i]); // 讀取爲字節數組
// 獲取文件後綴名
var filename = objFiles.files[i].name;
var index = filename.lastIndexOf(".");
var suffix = filename.substr(index + 1);
reader.onload = function (evt) {
var temp = evt.target.result;
console.log(temp);
// 將字節流轉爲 hex 十六進制字符串
var params = buf2hex(temp);
console.log(params);
var postData = {
"data": params,
"fileNameExtream": suffix
};
// 添加ajax 請求，將數據返回到後端
$.ajax({
type: 'post',
contentType: "application/json", //後端Jersey採用相應的接受參數即可
url: 'http://localhost:8899/bcgis/storage/cooperativeStorage/test',
data: JSON.stringify(postData),
success: function (data) {
// console.log('data: ' + JSON.stringify(data));
console.log(data);
},
error: function (err) {
console.log('err: ');
console.log(JSON.stringify(err));
}
});
}
}
});
//arraybuffer to hex
function buf2hex(buffer) { // buffer is an ArrayBuffer
return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
}
});
java接收
基於Jersey框架
@Path("storage/cooperativeStorage")
public class CooperativeStorage {
@Path("/test")
@POST
@Produces(MediaType.APPLICATION_JSON) // 返回
@Consumes(MediaType.APPLICATION_JSON) // 接收
public String upload(
String params
) throws IOException, URISyntaxException {
JSONObject jsonObject = JSONObject.parseObject(params);
String fileExtName = "." + jsonObject.getString("fileNameExtream");
String data = jsonObject.getString("data");
String saveFileName = Utils.getSHA256(data);
byte[] byteData = Utils.hexToByteArray(data);
// 將數據保存到本地
OutputStream os = new FileOutputStream("E:\\SuperMapData\\" + saveFileName + fileNameExtream);
os.write(byteData, 0, byteData.length);
os.flush();
os.close();
return "save file success";
}
}
hexToByteArray
//hex to byte[]
public static byte[] hexToByteArray(String inHex){
int hexlen = inHex.length();
byte[] result;
if (hexlen % 2 == 1){
//奇數
hexlen++;
result = new byte[(hexlen/2)];
inHex="0"+inHex;
}else {
//偶數
result = new byte[(hexlen/2)];
}
int j=0;
for (int i = 0; i < hexlen; i+=2){
result[j]=hexToByte(inHex.substring(i,i+2));
j++;
}
return result;
}
public static byte hexToByte(String inHex){
return (byte)Integer.parseInt(inHex,16);
}
感謝觀看！！！