我正在开发一个超文本标记语言,javascript和jQuery的网站。我想在ajax请求中将图像上传到亚马逊s3服务器。在Javascript中没有这样的SDK来集成s3。PHP SDK是可用的,但它对我没有用处。有人能用javascript提供这个问题的解决方案吗?
发布于 2012-09-12 05:45:52
基于本文article,使用XMLHTTPObject让亚马逊S3 & CORS在js和html5上工作。
1: CORS只能从正确的URL "http://localhost“开始工作。(file/xyz会让你发疯)
2:确保你正确编译了策略和秘密--这是我的策略,这是你可以获得项目的链接,让你开始使用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 = new XMLHttpRequest();
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>
祝你生日快乐!
发布于 2012-09-02 01:26:26
亚马逊刚刚允许跨域资源共享,理论上它允许你的用户直接上传到S3,而不需要使用你的服务器(和PHP)作为代理。
这是-> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html的文档
他们在告诉你如何在S3存储桶上启用它方面做得很好,但iv没有找到实际的javascript示例来说明如何将数据从客户端获取到存储桶。
传奇人物xD是第一个发布CORS.js的人
发布于 2012-10-17 15:51:53
以下是使用CORS和javascript http://cotag.github.com/Condominios/在亚马逊S3上恢复上传文件的示例
https://stackoverflow.com/questions/11240127
复制相似问题