上传图片到Amazon S3使用HTML，JavaScript的＆放大器; jQuery的使用Ajax请求（没有PHP）

问题描述

我正在开发的HTML，JavaScript的＆放一个网站; jQuery的。我要上传图片到Amazon S3服务器Ajax请求。有没有这样的SDK来在Javascript中集成S3。一个PHP SDK是可用的，但它不是对我很有用。任何人都可以提供解决方案，这在JavaScript？

I am developing a website in HTML, javascript & jQuery. I want to upload images to amazon s3 server in an ajax request. There is no such SDK to integrate s3 in Javascript. A PHP SDK is available, but it is not useful to me. Can anybody provide solution to this in javascript?

推荐答案

得到亚马逊的S3和放大器; CORS工作的JS和使用XMLHTTPObject基于HTML5的这篇文章article.

Got Amazon S3 & CORS working on js and html5 using XMLHTTPObject based on this article article.

1：CORS只有从正确的URL：//本地主机HTTP的作品。 （文件/// XYZ会让你发疯）

1: CORS only works from a proper URL "http://localhost". (file///xyz will make you go insane)

2：确保你得到了政策和秘密编译正确的 - 这是我的政策，这是你开始有Signature与政策 - ！不公布这个JS用你的秘密EVER

2 : Make sure you got the POLICY and Secret compiled correctly - here is my policy and this is the link you can get the project to get you started with Signature and Policy -- do not publish this JS with your Secret EVER!

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 code

Here is the JS code

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表单

Then the HTML Form

 <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>

快乐CORS-ING！

Happy CORS-ing!

这篇关于上传图片到Amazon S3使用HTML，JavaScript的＆放大器; jQuery的使用Ajax请求（没有PHP）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！