使用HTML、javascript&jQuery和Ajax请求将Image上传到AmazonS 3(没有PHP)

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (55)

我正在用HTML、javascript&jQuery开发一个网站。我想在Ajax请求中将图片上传到AmazonS 3服务器。在Javascript中没有这样的SDK来集成S3。PHPSDK是可用的,但它对我没有用处。有人能用javascript来解决这个问题吗?

提问于
用户回答回答于

根据这篇文章文章,使用XMLHTTPObject获得Amazon S3和CORS在js和html5上的工作。

1:CORS只能从一个合适的URL“ http:// localhost ”工作。

2:确保你的POLICY和Secret编译正确 - 这里是我的政策,这是你可以得到项目的链接,让你开始签名和政策 - 不要发布这个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,而无需使用你的服务器(和PHP)作为代理。

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

他们做了一个很好的工作,告诉你如何在S3存储桶上启用它,但是没有找到如何从客户端获取数据的实际javascript示例。

扫码关注云+社区

领取腾讯云代金券