HTML, 자바 스크립트 및 Ajax 요청으로 jQuery를 사용하여 Amazon s3에 이미지 업로드 (PHP 없음)
HTML, javascript 및 jQuery로 웹 사이트를 개발 중입니다. ajax 요청에서 Amazon s3 서버에 이미지를 업로드하고 싶습니다. Javascript에 s3를 통합하는 SDK는 없습니다. PHP SDK를 사용할 수 있지만 나에게는 유용하지 않습니다. 아무도 자바 스크립트에서 이에 대한 해결책을 제공 할 수 있습니까?
있어 아마존 S3 및 CORS는 JS 작업 및 HTML5이 문서를 기반으로 XMLHTTPObject 사용하여 기사를 .
1 : CORS는 올바른 URL " http : // localhost " 에서만 작동합니다 . (file /// xyz는 당신을 미치게 만들 것입니다)
2 : 정책 및 비밀이 올바르게 컴파일되었는지 확인하십시오. 여기 내 정책이 있으며 이것은 서명 및 정책 을 시작할 수 있도록 프로젝트를 얻을 수있는 링크입니다. 이 JS를 비밀 EVER와 함께 게시하지 마십시오!
POLICY_JSON = { "expiration": "2020-12-01T12:00:00.000Z",
"conditions": [
{"bucket": this.get('bucket')},
["starts-with", "$key", ""],
{"acl": this.get('acl')},
["starts-with", "$Content-Type", ""],
["content-length-range", 0, 524288000]
]
};
var secret = this.get('AWSSecretKeyId');
var policyBase64 = Base64.encode(JSON.stringify(POLICY_JSON));
console.log ( policyBase64 )
var signature = b64_hmac_sha1(secret, policyBase64);
b64_hmac_sha1(secret, policyBase64);
console.log( signature);
다음은 JS 코드입니다.
function uploadFile() {
var file = document.getElementById('file').files[0];
var fd = new FormData();
var key = "events/" + (new Date).getTime() + '-' + file.name;
fd.append('key', key);
fd.append('acl', 'public-read');
fd.append('Content-Type', file.type);
fd.append('AWSAccessKeyId', 'YOUR ACCESS KEY');
fd.append('policy', 'YOUR POLICY')
fd.append('signature','YOUR SIGNATURE');
fd.append("file",file);
var xhr = getXMLHTTPObject();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open('POST', 'https://<yourbucket>.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND
xhr.send(fd);
}
도우미 기능
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert("Done - " + evt.target.responseText );
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file." + evt);
}
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
}
그런 다음 HTML 양식
<form id="form1" enctype="multipart/form-data" method="post">
<div class="row">
<label for="file">Select a File to Upload</label><br />
<input type="file" name="file" id="file" onchange="fileSelected()"/>
</div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<div class="row">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<div id="progressNumber"></div>
행복한 CORS-ing!
Amazon은 방금 Cross-Origin 리소스 공유를 허용했습니다. 이론적으로 사용자는 서버 (및 PHP)를 프록시로 사용하지 않고 S3에 직접 업로드 할 수 있습니다.
문서-> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html
그들은 S3 버킷에서 활성화하는 방법을 알려주는 훌륭한 작업을 수행하지만 클라이언트에서 버킷으로 데이터를 가져 오는 방법에 대한 실제 자바 스크립트 예제를 찾지 못했습니다.
CORS.js를 처음 게시 한 사람은 범례 xD입니다.
다음은 CORS 및 javascript http://cotag.github.com/Condominios/를 사용하여 Amazon S3에서 재개 가능한 파일 업로드의 예입니다 .
AWS S3 Cognito에서이 작업을 수행 할 수 있습니다. 여기에서이 링크를 시도해보십시오.
http://docs.aws.amazon.com/AWSJavaScriptSDK/guide/browser-examples.html#Amazon_S3
이 코드도 시도하십시오
지역, IdentityPoolId 및 버킷 이름 만 변경하면됩니다.
<!DOCTYPE html>
<html>
<head>
<title>AWS S3 File Upload</title>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>
<body>
<input type="file" id="file-chooser" />
<button id="upload-button">Upload to S3</button>
<div id="results"></div>
<script type="text/javascript">
AWS.config.region = 'your-region'; // 1. Enter your region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'your-IdentityPoolId' // 2. Enter your identity pool
});
AWS.config.credentials.get(function(err) {
if (err) alert(err);
console.log(AWS.config.credentials);
});
var bucketName = 'your-bucket'; // Enter your bucket name
var bucket = new AWS.S3({
params: {
Bucket: bucketName
}
});
var fileChooser = document.getElementById('file-chooser');
var button = document.getElementById('upload-button');
var results = document.getElementById('results');
button.addEventListener('click', function() {
var file = fileChooser.files[0];
if (file) {
results.innerHTML = '';
var objKey = 'testing/' + file.name;
var params = {
Key: objKey,
ContentType: file.type,
Body: file,
ACL: 'public-read'
};
bucket.putObject(params, function(err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
listObjs(); // this function will list all the files which has been uploaded
//here you can also add your code to update your database(MySQL, firebase whatever you are using)
}
});
} else {
results.innerHTML = 'Nothing to upload.';
}
}, false);
function listObjs() {
var prefix = 'testing';
bucket.listObjects({
Prefix: prefix
}, function(err, data) {
if (err) {
results.innerHTML = 'ERROR: ' + err;
} else {
var objKeys = "";
data.Contents.forEach(function(obj) {
objKeys += obj.Key + "<br>";
});
results.innerHTML = objKeys;
}
});
}
</script>
</body>
</html>
필요한 경우 github Link를 사용할 수 있습니다.
다른 사람들에게 도움이되기를 바랍니다. :)
인증 부분의 경우
아래를 제외하고는 PHP 코드, 서버, 큰 JS 코드가 없습니다.
AWS Cognito IdentityPoolId를 자격 증명으로 사용할 수 있지만 코드는 더 적지 만 AWS Cognito IdetityPool을 생성하고 정책을 연결하면됩니다. s3 쓰기 액세스 만하면됩니다.
var IdentityPoolId = 'us-east-1 : 1 ...........';
AWS.config.update ({
자격 증명 : 새로운 AWS.CognitoIdentityCredentials ({
IdentityPoolId: IdentityPoolId
})
});
'developer tip' 카테고리의 다른 글
| MKMapView : Annotation Pin 대신 사용자 지정보기 (0) | 2020.11.30 |
|---|---|
| 직접 URL 액세스에서 파일을 방지하는 방법은 무엇입니까? (0) | 2020.11.30 |
| BigDecimal을 문자열로 (0) | 2020.11.30 |
| True 또는 False를 무작위로 반환 (0) | 2020.11.29 |
| wget 진행률 표시 줄 만 표시하는 방법은 무엇입니까? (0) | 2020.11.29 |