首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >上传图片到亚马逊s3与超文本标记语言,javascript和jQuery的Ajax请求(没有PHP)

上传图片到亚马逊s3与超文本标记语言,javascript和jQuery的Ajax请求(没有PHP)
EN

Stack Overflow用户
提问于 2012-06-28 15:40:38
回答 3查看 77.2K关注 0票数 64

我正在开发一个超文本标记语言,javascript和jQuery的网站。我想在ajax请求中将图像上传到亚马逊s3服务器。在Javascript中没有这样的SDK来集成s3。PHP SDK是可用的,但它对我没有用处。有人能用javascript提供这个问题的解决方案吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2012-09-12 05:45:52

基于本文article,使用XMLHTTPObject让亚马逊S3 & CORS在js和html5上工作。

1: CORS只能从正确的URL "http://localhost“开始工作。(file/xyz会让你发疯)

2:确保你正确编译了策略和秘密--这是我的策略,这是你可以获得项目的链接,让你开始使用Signature and Policy --永远不要用你的秘密发布这个JS!

代码语言:javascript
复制
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代码

代码语言:javascript
复制
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);
  }

帮助器函数

代码语言:javascript
复制
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表单

代码语言:javascript
复制
 <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>

祝你生日快乐!

票数 125
EN

Stack Overflow用户

发布于 2012-09-02 01:26:26

亚马逊刚刚允许跨域资源共享,理论上它允许你的用户直接上传到S3,而不需要使用你的服务器(和PHP)作为代理。

这是-> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html的文档

他们在告诉你如何在S3存储桶上启用它方面做得很好,但iv没有找到实际的javascript示例来说明如何将数据从客户端获取到存储桶。

传奇人物xD是第一个发布CORS.js的人

票数 7
EN

Stack Overflow用户

发布于 2012-10-17 15:51:53

以下是使用CORS和javascript http://cotag.github.com/Condominios/在亚马逊S3上恢复上传文件的示例

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11240127

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档