You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.1 KiB
59 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
</head>
|
|
<body>
|
|
<input type="file" id="selector" multiple>
|
|
<button onclick="upload()">Upload</button>
|
|
|
|
<div id="status">No uploads</div>
|
|
<script type="text/javascript">
|
|
// `upload` iterates through all files selected and invokes a helper function called `retrieveNewURL`.
|
|
function upload() {
|
|
// Get selected files from the input element.
|
|
var files = document.querySelector("#selector").files;
|
|
for (var i = 0; i < files.length; i++) {
|
|
var file = files[i];
|
|
// 从服务器获取一个URL
|
|
retrieveNewURL(file, (file, url) => {
|
|
// 上传文件到服务器
|
|
uploadFile(file, url);
|
|
});
|
|
}
|
|
}
|
|
// 发请求到Node.js server获取上传URL。
|
|
// `retrieveNewURL` accepts the name of the current file and invokes the `/presignedUrl` endpoint to
|
|
// generate a pre-signed URL for use in uploading that file:
|
|
function retrieveNewURL(file, cb) {
|
|
fetch(`/dsSupport/minio/presignedUrl?name=${file.name}`).then((response) => {
|
|
response.text().then((url) => {
|
|
console.log(url);
|
|
cb(file, url);
|
|
});
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
|
|
// 使用Fetch API来上传文件到S3。
|
|
// ``uploadFile` accepts the current filename and the pre-signed URL. It then uses `Fetch API`
|
|
// to upload this file to S3 at `play.min.io:9000` using the URL:
|
|
function uploadFile(file, url) {
|
|
if (document.querySelector('#status').innerText === 'No uploads') {
|
|
document.querySelector('#status').innerHTML = '';
|
|
}
|
|
fetch(url, {
|
|
method: 'PUT',
|
|
body: file
|
|
}).then(() => {
|
|
// If multiple files are uploaded, append upload status on the next line.
|
|
document.querySelector('#status').innerHTML += `<br>Uploaded ${file.name}.`;
|
|
}).catch((e) => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |