JS实现选择多个文件传输到后端

87 阅读 0 评论 58 点赞

我是靠谱客的博主震动猫咪，这篇文章主要介绍JS实现选择多个文件传输到后端，现在分享给大家，希望可以做个参考。

时间：2019.12.02.19.24
本博客实现的内容是利用JS代码实现在前端弹出对话框，选取对话框的文件，然后通过ajax的方式传输给后端，具体实现见代码
具体流程：文件---->数据流—>hex（十六进制的字符串）----->传输到后端---->java解析为byte[]--------->保存为对应的文件

JS代码

transferFileToBackend.html

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!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('');
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

$(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框架

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
@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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//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);
}