使用带有Ajax请求的HTML,javascript和jQuery将图像上传到Amazon s3(无PHP)

Question

我正在开发一个HTML,javascript和jQuery的网站.我想在ajax请求中将图像上传到amazon s3服务器.没有这样的SDK可以在Javascript中集成s3.PHP SDK可用,但对我没用.任何人都可以在JavaScript中提供解决方案吗？

Answer 1

根据本文的文章,使用XMLHTTPObject让Amazon S3和CORS在js和html5上工作.

1:CORS仅适用于正确的URL" http:// localhost ".(文件/// xyz会让你发疯)

2:确保你已经正确编译了POLICY和Secret - 这是我的政策,这是你可以获得项目的链接,让你开始使用签名和政策 - 不要用你的秘密EVER发布这个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>

快乐的CORSING!

Answer 2

亚马逊只允许跨源资源共享,理论上它允许您的用户直接上传到S3,而无需使用您的服务器(和PHP)作为代理.

继承人的文档 - > http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

他们很好地告诉你如何在S3存储桶上启用它,但iv没有发现如何从客户端到存储桶获取数据的实际javascript示例.

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

Answer 3

以下是使用CORS和javascript http://cotag.github.com/Condominios/在Amazon S3上上载可恢复文件的示例