web-dev-qa-db-de.com

Hochladen von Bildern auf Amazon S3 mit HTML, Javascript und jQuery mit Ajax Request (kein PHP)

Ich entwickle eine Website in HTML, Javascript und jQuery. Ich möchte Bilder in einer Ajax-Anforderung auf den Amazon S3-Server hochladen. Es gibt kein solches SDK, um s3 in Javascript zu integrieren. Ein PHP SDK ist verfügbar, aber es ist für mich nicht nützlich. Kann jemand eine Lösung dafür in Javascript anbieten?

60
Swapnil Godambe

Amazon S3 & CORS wurde an js und html5 mit XMLHTTPObject basierend auf diesem Artikel article gearbeitet. 

1: CORS funktioniert nur mit einer richtigen URL " http: // localhost ". (Datei /// xyz wird dich verrückt machen)

2: Stellen Sie sicher, dass Sie die POLICY und das Secret richtig zusammengestellt haben - hier ist meine Policy und hier ist der Link, über den Sie das Projekt starten können, um mit Signature und Policy - diese JS nicht mit Ihrem Secret EVER zu veröffentlichen !

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

Hier ist der 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);
  }

Hilfsfunktionen

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

Dann das HTML-Formular 

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

Happy CORS-ing!

117
fino

Amazon hat Cross-Origin-Ressourcenfreigabe erlaubt, theoretisch können Benutzer direkt in S3 hochladen, ohne Ihren Server (und PHP) als Proxy zu verwenden.

Hier sind die Dokumente -> http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html

Sie machen eine großartige Arbeit, um Ihnen zu sagen, wie sie auf einem S3-Bucket aktiviert werden kann, aber ich habe keine Javascript-Beispiele gefunden, wie Sie Daten vom Client in den Bucket bekommen.

Die erste Person, die CORS.js postet, ist eine Legende xD 

7
lukejacksonn

Hier ein Beispiel für wiederaufladbare Dateiuploads auf Amazon S3 mit CORS und Javascript http://cotag.github.com/Condominios/

5
PaddlePoP

Sie können dies mit AWS S3 Cognito tun, indem Sie diesen Link hier verwenden:

http://docs.aws.Amazon.com/AWSJavaScriptSDK/guide/browser-examples.html#Amazon_S3

Versuchen Sie auch diesen Code 

Ändern Sie einfach Region, IdentityPoolId und Ihren Bucket-Namen

<!DOCTYPE html>
<html>

<head>
    <title>AWS S3 File Upload</title>
    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
</head>

<body>
    <input type="file" id="file-chooser" />
    <button id="upload-button">Upload to S3</button>
    <div id="results"></div>
    <script type="text/javascript">
    AWS.config.region = 'your-region'; // 1. Enter your region
    AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'your-IdentityPoolId' // 2. Enter your identity pool
    });
    AWS.config.credentials.get(function(err) {
        if (err) alert(err);
        console.log(AWS.config.credentials);
    });
    var bucketName = 'your-bucket'; // Enter your bucket name
    var bucket = new AWS.S3({
        params: {
            Bucket: bucketName
        }
    });
    var fileChooser = document.getElementById('file-chooser');
    var button = document.getElementById('upload-button');
    var results = document.getElementById('results');
    button.addEventListener('click', function() {
        var file = fileChooser.files[0];
        if (file) {
            results.innerHTML = '';
            var objKey = 'testing/' + file.name;
            var params = {
                Key: objKey,
                ContentType: file.type,
                Body: file,
                ACL: 'public-read'
            };
            bucket.putObject(params, function(err, data) {
                if (err) {
                    results.innerHTML = 'ERROR: ' + err;
                } else {
                    listObjs(); // this function will list all the files which has been uploaded
                    //here you can also add your code to update your database(MySQL, firebase whatever you are using)
                }
            });
        } else {
            results.innerHTML = 'Nothing to upload.';
        }
    }, false);
    function listObjs() {
        var prefix = 'testing';
        bucket.listObjects({
            Prefix: prefix
        }, function(err, data) {
            if (err) {
                results.innerHTML = 'ERROR: ' + err;
            } else {
                var objKeys = "";
                data.Contents.forEach(function(obj) {
                    objKeys += obj.Key + "<br>";
                });
                results.innerHTML = objKeys;
            }
        });
    }
    </script>
</body>

</html>

Bei Bedarf können Sie github Link verwenden.

Ich hoffe es hilft anderen :)

3
Joomler

Für den Authentifizierungsteil

Kein PHP-Code, kein Server, kein großer JS-Code außer unten;

sie können AWS Cognito IdentityPoolId als Berechtigungsnachweis verwenden, weniger Code Sie müssen jedoch AWS Cognito IdetityPool und eine Anhangsrichtlinie erstellen, einfach s3-Schreibzugriff.

 var IdentityPoolId = 'us-east-1: 1 ...........'; 


 AWS.config.update ({
 Anmeldeinformationen: neue AWS.CognitoIdentityCredentials ({
 IdentityPoolId: IdentityPoolId 
}) 
}); 
__.
0