blocks|key|317957|text|亚马逊刚刚允许跨域资源共享，理论上它允许你的用户直接上传到S3，而不需要使用你的服务器(和PHP)作为代理。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|317958|这是->+http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html的文档|offset|length|317959|他们在告诉你如何在S3存储桶上启用它方面做得很好，但iv没有找到实际的javascript示例来说明如何将数据从客户端获取到存储桶。|317960|传奇人物xD是第一个发布CORS.js的人|317961|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html^0|0|5|1R|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>Amazon just allowed Cross-Origin Resource Sharing, in theory it allows your users to upload to S3 directly, without using your server (and PHP) as a proxy.</p>

<p>Heres the docs -> <a href="http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html" rel="noreferrer">http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html</a></p>

<p>They do a great job of telling you how to enable it on an S3 bucket, but iv found no actual javascript examples of how to get data from client to bucket.</p>

<p>First person to post CORS.js is a legend xD   </p>


blocks|key|534878|text|基于本文article，使用XMLHTTPObject让亚马逊S3+&+CORS在js和html5上工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|534879|1:+CORS只能从正确的URL+"http://localhost“开始工作。(file/xyz会让你发疯)|534880|2:确保你正确编译了策略和秘密--这是我的策略，这是你可以获得项目的链接，让你开始使用Signature+and+Policy++--永远不要用你的秘密发布这个JS！|534881|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);|code-block|syntax|javascript|534882|以下是JS代码|534883|function+uploadFile()+{

++++var+file+=+document.getElementById('file').files[0];
++++var+fd+=+new+FormData();

++++var+key+=+"events/"+%2B+(new+Date).getTime()+%2B+'-'+%2B+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);
++}|534884|帮助器函数|534885|function+uploadProgress(evt)+{
++++if+(evt.lengthComputable)+{
++++++var+percentComplete+=+Math.round(evt.loaded+*+100+/+evt.total);
++++++document.getElementById('progressNumber').innerHTML+=+percentComplete.toString()+%2B+'%25';
++++}
++++else+{
++++++document.getElementById('progressNumber').innerHTML+=+'unable+to+compute';
++++}
++}

++function+uploadComplete(evt)+{
++++/*+This+event+is+raised+when+the+server+send+back+a+response+*/
++++alert("Done+-+"+%2B+evt.target.responseText+);
++}

++function+uploadFailed(evt)+{
++++alert("There+was+an+error+attempting+to+upload+the+file."+%2B+evt);
++}

++function+uploadCanceled(evt)+{
++++alert("The+upload+has+been+canceled+by+the+user+or+the+browser+dropped+the+connection.");
++}|534886|然后是HTML表单|534887|+<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>|534888|​|534889|祝你生日快乐！|534890|entityMap|0|LINK|mutability|MUTABLE|url|http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors|1|http://localhost/|2|http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/^0|4|7|0|0|I|G|1|0|17|L|2|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|F|3|G|5|6|7|1M|8|@]|9|@$A|1N|B|1O|1|1P]]|C|$]]|$1|H|3|I|5|J|7|1Q|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1R|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1S|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1T|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1U|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1V|8|@]|9|@]|C|$]]|$1|W|3|X|5|J|7|1W|8|@]|9|@]|C|$K|L]]|$1|Y|3|Z|5|6|7|1X|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|1Y|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]|1C|$5|15|16|17|C|$18|1D]]]]

<p>Got Amazon S3 &amp; CORS working on js and html5 using XMLHTTPObject based on this article <a href="http://bencoe.tumblr.com/post/30685403088/browser-side-amazon-s3-uploads-using-cors" rel="nofollow noreferrer">article</a>. </p>

<p>1: CORS only works from a proper URL "<a href="http://localhost" rel="nofollow noreferrer">http://localhost</a>". (file///xyz will make you go insane)</p>

<p>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 <a href="http://www.tweetegy.com/2012/01/save-an-image-file-directly-to-s3-from-a-web-browser-using-html5-and-backbone-js/" rel="nofollow noreferrer">Signature and Policy </a> -- do not publish this JS with your Secret EVER!</p>

<pre><code>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);
</code></pre>

<p>Here is the JS code</p>

<pre><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 = 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://&lt;yourbucket&gt;.s3.amazonaws.com/', true); //MUST BE LAST LINE BEFORE YOU SEND 

    xhr.send(fd);
  }
</code></pre>

<p>Helper functions</p>

<pre><code>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.");
  }
</code></pre>

<p>Then the HTML Form </p>

<pre><code> &lt;form id="form1" enctype="multipart/form-data" method="post"&gt;
&lt;div class="row"&gt;
  &lt;label for="file"&gt;Select a File to Upload&lt;/label&gt;&lt;br /&gt;
  &lt;input type="file" name="file" id="file" onchange="fileSelected()"/&gt;
&lt;/div&gt;
&lt;div id="fileName"&gt;&lt;/div&gt;
&lt;div id="fileSize"&gt;&lt;/div&gt;
&lt;div id="fileType"&gt;&lt;/div&gt;
&lt;div class="row"&gt;
  &lt;input type="button" onclick="uploadFile()" value="Upload" /&gt;
&lt;/div&gt;
&lt;div id="progressNumber"&gt;&lt;/div&gt;
</code></pre>

<p></p>

<p>Happy CORS-ing!</p>


blocks|key|318085|text|以下是使用CORS和javascript+http://cotag.github.com/Condominios/在亚马逊S3上恢复上传文件的示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|318086|entityMap|0|LINK|mutability|MUTABLE|url|http://cotag.github.com/Condominios/^0|L|10|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Here's an example of resumable file uploads on Amazon S3 using CORS and javascript <a href="http://cotag.github.com/Condominios/" rel="noreferrer">http://cotag.github.com/Condominios/</a></p>


<p>I am developing a website in HTML, javascript &amp; 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?</p>


Uploading Image to Amazon s3 with HTML, javascript & jQuery with Ajax Request (No PHP)

服务器

jQuery

JSON

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

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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