Le téléchargement de l'Image sur Amazon s3 avec HTML, javascript & jQuery avec une Requête Ajax (Pas de PHP)

Question

Je suis en train d'élaborer un site web en HTML, javascript et jQuery. Je veux télécharger des images vers le serveur amazon s3 dans une requête ajax. Il n'y a pas une telle SDK pour intégrer s3 en Javascript. Un SDK PHP est disponible, mais il n'est pas utile pour moi. Quelqu'un peut-il fournir une solution à cela en javascript?

Answer 1

Obtenu Amazon S3 & CORS de travail sur js et html5 à l'aide de XMLHTTPObject fondées sur le présent article l'article.

1: de la SCRO ne fonctionne qu'à partir d'une URL propre "http://localhost". (fichier///xyz va vous faire devenir fou)

2 : assurez-vous que vous avez obtenu le POLITIQUE et le Secret compilé correctement - voici ma politique, c'est le lien, vous pouvez obtenir le projet pour vous obtenir a commencé avec la Signature et de la Politique - ne pas publier ce JS avec votre Secret JAMAIS!

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

Voici le code 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);
  }

Des fonctions d'assistance

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

Ensuite le Formulaire 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>

Heureux de la SCRO-ing!

Answer 2

Amazon juste permis de Cross-Origin Resource sharing, en théorie, il permet à vos utilisateurs de télécharger S3 directement, sans l'aide de votre serveur (et PHP) comme un proxy.

Heres la docs -> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

Ils font un excellent travail de vous dire comment l'activer sur un compartiment S3, mais iv pas trouvé de réelle javascript exemples de la façon d'obtenir les données du client vers le seau.

La première personne à poster CORS.js est une légende xD

Answer 3

Voici un exemple de reprise de téléchargements de fichiers sur Amazon S3 à l'aide de la SCRO et javascript http://cotag.github.com/Condominios/