cors
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"HEAD",
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"ETag"
]
}
]
html
<html>
<head>
<title> AWS S3 File Upload Progress Bar</title>
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>
</head>
<body>
<input type="file" id="myFile" multiple size="50" onchange="uploadSampleFile()"><br><br>
<div id="myProgress" style="display:none;">
<div id="myBar"></div>
</div>
</body>
</html>
css
#myProgress { width: 100%; background-color: grey;}
#myBar { width: 1%; height: 30px; background-color: green;}
js
// AWS progressbar
var bucket = new AWS.S3({
accessKeyId: "",
secretAccessKey: "",
region: ''
});
uploadfile = function(fileName, file, folderName) {
const params = {
Bucket: "",
Key: folderName + fileName,
Body: file,
ContentType: file.type
};
return this.bucket.upload(params, function(err, data) {
if (err) {
console.log('There was an error uploading your file: ', err);
return false;
}
console.log('Successfully uploaded file.', data);
return true;
});
}
uploadSampleFile = function() {
//파일명을 추출해냄
var file = document.getElementById('videofile');
//파일 경로.
var filePath = file.value;
//전체경로를 \ 나눔.
var filePathSplit = filePath.split('\\');
//전체경로를 \로 나눈 길이.
var filePathLength = filePathSplit.length;
//마지막 경로를 .으로 나눔.
var fileNameSplit = filePathSplit[filePathLength-1].split('.');
//파일명 : .으로 나눈 앞부분
var fileName = fileNameSplit[0];
var fileExt = fileNameSplit[1];
var realfilename=fileName+"."+fileExt;
var progressDiv = document.getElementById("myProgress");
progressDiv.style.display="block";
var progressBar = document.getElementById("myBar");
file = document.getElementById("videofile").files[0];
filename=document.getElementById("videofile").value;
folderName = realfilename;
uniqueFileName = '';
let fileUpload = {
id: "",
name: file.name,
nameUpload: uniqueFileName,
size: file.size,
type: "",
timeReference: 'Unknown',
progressStatus: 0,
displayName: file.name,
status: 'Uploading..',
}
uploadfile(uniqueFileName, file, folderName)
.on('httpUploadProgress', function(progress) {
let progressPercentage = Math.round(progress.loaded / progress.total * 100);
console.log(progressPercentage);
progressBar.style.width = progressPercentage + "%";
if (progressPercentage < 100) {
fileUpload.progressStatus = progressPercentage;
} else if (progressPercentage == 100) {
fileUpload.progressStatus = progressPercentage;
fileUpload.status = "Uploaded";
window.alert("업로드에 성공!");
document.getElementById('frm').submit();
}
})
}
참고사이트
'AWS' 카테고리의 다른 글
| EBS(Elastic Beanstalk) 배포 (0) | 2023.03.27 |
|---|---|
| AWS EIP 탄력적 IP설정 (0) | 2022.12.27 |
| AWS EC2 Gradle 배포시 멈춤현상 (0) | 2022.12.25 |
| EC2에 DOCKER설치 및 아파치 서버구동 (1) | 2022.11.04 |
| 이클립스 AWS S3 활용하기! (0) | 2022.10.10 |
