<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Folder Example</title>
</head>
<body>
<!--<form action="/digitalpersons/edit" method="post" enctype="multipart/form-data" onsubmit="event.preventDefault();uploadData();">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="gender">性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
<option value="other">其他</option>
</select><br><br>
<label for="personality">个性:</label>
<input type="text" id="personality" name="personality"><br><br>
<label for="catchphrases">口头禅:</label>
<input type="text" id="catchphrases" name="catchphrases"><br><br>
<label for="backgroundInfo">背景信息:</label>
<textarea id="backgroundInfo" name="backgroundInfo"></textarea><br><br>
<label for="visibility">可见性:</label>
<select id="visibility" name="visibility">
<option value="public">公开</option>
<option value="private">私有</option>
</select><br><br>
<label for="id">编号:</label>
<input type="text" id="id" name="id"><br><br>
<label for="avatar">头像:</label>
<input type="file" id="avatar" name="avatar" multiple><br><br>
<label for="poster">海报:</label>
<input type="file" id="poster" name="poster"><br><br>
<label for="model_driver_type">模型驱动类型:</label>
<input type="text" id="model_driver_type" name="model_driver_type"><br><br>
<label for="voice_type">语音类型:</label>
<input type="text" id="voice_type" name="voice_type"><br><br>
<input type="file" id="folderInput" webkitdirectory mozdirectory directory multiple style="display: none;">
<button type="button" onclick="document.getElementById('folderInput').click()">Upload Folder</button>
<input type="submit" value="提交">
</form>-->
<!--
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="login()">提交</button>
</form>
-->
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" id="avatar" name="avatar"><br><br>
<input type="file" id="poster" name="poster"><br><br>
<input type="file" id="folderInput" webkitdirectory mozdirectory directory multiple>
<button onclick="uploadFolder()">Upload</button>
</form>
</body>
<script>
function login() {
// 创建一个包含用户名和密码的对象
// let form = document.getElementById('loginForm');
// let username = form.elements.username.value;
// let password = form.elements.password.value;
let data = {
username: "admin",
password: "admin"
};
fetch('http://localhost:8089/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => {
// 请求成功的处理
console.log('登录成功');
console.log(data);
})
.catch(error => {
// 请求失败的处理
console.error('登录失败');
console.error(error);
});
}
console.log("========== login(); ==========")
login();
function uploadFolder() {
let input = document.getElementById('folderInput');
// 确保用户选择了一个文件夹
if (!input.files || !input.files.length) {
return alert('Please select a folder to upload.');
}
let files = input.files;
let formData = new FormData();
// 使用append()方法动态添加数据
formData.append('name', '马斯克');
formData.append('gender', 'male');
formData.append('personality', '科技大佬');
formData.append('catchphrases', '口头禅');
formData.append('backgroundInfo', '背景信息');
formData.append('visibility', 'public');
formData.append('id', '4');
formData.append('model_driver_type', '3d');
formData.append('voice_type', '东北辽宁少女口音');
console.log(id)
// 添加文件
let avatarInput = document.getElementById('avatar');
if(avatarInput.files[0]) {
formData.append('avatar', avatarInput.files[0]);
}
let posterInput = document.getElementById('poster');
if(posterInput.files[0]) {
formData.append('poster', posterInput.files[0]);
}
// 将文件的相对路径和文件对象添加到FormData中
for (let i = 0; i < files.length; i++) {
formData.append('model_folder', files[i], files[i].webkitRelativePath);
}
// 创建一个 XMLHttpRequest 对象进行异步请求
let request = new XMLHttpRequest();
request.open('POST', 'http://localhost:8089/digitalpersons/edit', true);
request.onload = function() {
if (request.status === 200) {
// 文件上传成功的处理
console.log(request.responseText);
} else {
// 文件上传失败的处理
console.error(request.responseText);
}
};
// 发送FormData对象到服务器
request.send(formData);
}
</script>
</html>