93 lines
2.8 KiB
HTML
93 lines
2.8 KiB
HTML
|
<!--
|
||
|
|
* @Author: Kane
|
||
|
|
* @Date: 2022-09-29 16:33:30
|
||
|
|
* @LastEditors: Kane
|
||
|
|
* @LastEditTime: 2022-10-11 10:08:30
|
||
|
|
* @FilePath: \car_dealer\src\main\webapp\file_upload.html
|
||
|
|
* @Description:
|
||
|
|
*
|
||
|
|
* Copyright (c) ${2022} by Kane, All Rights Reserved.
|
||
|
|
-->
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>上传文件测试！</title>
|
||
|
|
<link rel="stylesheet" href="css/root.css" />
|
||
|
|
<link rel="stylesheet" href="css/normalize.css" />
|
||
|
|
<link rel="stylesheet" href="css/kane.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
<form
|
||
|
|
action="http://localhost:8080/cardealer/upload.do"
|
||
|
|
id="uploadform"
|
||
|
|
enctype="multipart/form-data"
|
||
|
|
method="post"
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
name="uploadFile"
|
||
|
|
id="upload"
|
||
|
|
style="display: none"
|
||
|
|
onchange="fileUploadChange()"
|
||
|
|
/>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value="12345"
|
||
|
|
name="test"
|
||
|
|
style="display: none"
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
id="upload_text"
|
||
|
|
readonly
|
||
|
|
onclick="upload.click()"
|
||
|
|
/>
|
||
|
|
<button id="btnUpload">上传</button>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
//const reqeustURL = "upload/upload_file.do";
|
||
|
|
const reqeustURL =
|
||
|
|
"http://localhost:8080/cardealer/upload/upload_file.do";
|
||
|
|
const btnUpload = document.getElementById("btnUpload");
|
||
|
|
|
||
|
|
function fileUploadChange() {
|
||
|
|
document.getElementById("upload_text").value =
|
||
|
|
document.getElementById("upload").value;
|
||
|
|
}
|
||
|
|
|
||
|
|
btnUpload.onclick = function (event) {
|
||
|
|
const uploadForm = document.getElementById("uploadform");
|
||
|
|
const form = new FormData(uploadForm);
|
||
|
|
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
|
||
|
|
xhr.upload.onprogress = function (event) {
|
||
|
|
if (event.lengthComputable) {
|
||
|
|
let percent = Math.round(
|
||
|
|
(event.loaded * 100) / event.total,
|
||
|
|
);
|
||
|
|
|
||
|
|
console.log("上传进度:" + percent);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.onload = function (event) {
|
||
|
|
console.log(xhr.responseText);
|
||
|
|
|
||
|
|
let result = JSON.parse(xhr.responseText);
|
||
|
|
|
||
|
|
console.log(result);
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.open("post", reqeustURL, true);
|
||
|
|
xhr.send(form);
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</html>
|