私はHTML形式のWebサイト（javadript & jQuery）を開発中です。私はajaxリクエストでamazon s3サーバーに画像をアップロードしたいと思います。 Javascriptでs3を統合するSDKはありません。 PHP SDKは利用可能ですが、それは私には役に立ちません。誰もがjavascriptでこれに解決策を提供できますか？Amazon S3にHTML、JavaScript、jQueryをAjaxリクエストでアップロードする（PHPなし）
は、Amazon S3にこの記事articleに基づいてXMLHTTPObjectを使用してJSとHTML5に取り組ん& CORSを手に入れています。
1：CORSは、適切なURL「http://localhost」からのみ動作します。
2：POLICYとSecretが正しくコンパイルされていることを確認してください。ここに私のポリシーがあります。これは、あなたがSignature and Policyで始めるためのプロジェクトを得ることができるリンクです。あなたの秘密とこのJSを公開しないでください！ここ
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>
ハッピーコーリング！ここで
こんにちは。これは私のS3バケットにアップロードするために探しているものとまったく同じように見えます。しかし、私は最初の部分（皮肉なことに、残りの部分はまっすぐに見える）で困っています。私はそれがS3に来ると正直言って、私はちょうどPOLICY_JSONコードで何をすべきか分からないときには全く新しいことだ。要するに：私はどこにこれを置くのですか？ – AJB
この記事では、AWSアップロードフォームの構造を詳細に説明しています。http://aws.amazon.com/articles/1434 – AJB
Base64の定義にはどのようなファイルを使用していますか？ –
AmazonはCross-Origin Resource Sharingを許可しました。理論上は、サーバ（およびPHP）をプロキシとして使用することなく、ユーザがS3に直接アップロードできるようになりました。
は、相続人ドキュメント - >http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html
彼らはS3バケットに、それを有効にする方法を伝えるの偉大な仕事をするが、IVは、バケットにクライアントからデータを取得する方法の実際のJavaScriptの例は認められませんでした。 CORS.jsを投稿する
まず人は伝説のxD
はCORSを使用してAmazon S3の上の再開可能なファイルアップロードの例とJavaScript http://cotag.github.com/Condominios/
だあなたは、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({
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
どうすればIdentityPoolIdを手に入れることができますか少しお礼ありがとうございます。 – usama
シンプルなネットワークトラフィックアナライザのCognitoトークンを盗んだ方は、S3バケット内のファイルを自由に連続してダンプする権限をコントロールすることができます。 「コードなしのサーバーなし大きなJS」 –
のコストは、httpsのようなものがあることを忘れる必要があります –
今質問が受け入れられているので、これは可能です。 – Jason