SORU
28 HAZİRAN 2012, PERŞEMBE


Ajax ile HTML, javascript & jQuery Talebi (PHP)ile Amazon durağan Resim s3

HTML, javascript & jQuery bir web sitesi geliştiriyorum. Bir ajax isteği amazon s3 sunucusuna resim yüklemek istiyorum. Javascript s3 entegre etmek için böyle bir SDK yok. Bir PHP SDK kullanılabilir, ama benim için yararlı değildir. Herkes javascript bu çözüm sağlayabilir mi?

CEVAP
11 EYLÜL 2012, Salı


S3 ve KÖŞELERİ Amazon js ve html5 kullanarak üzerinde çalışıyor bu maddeye göre XMLHTTPObject article.

1: Bir İSTASYONDAN sadece uygun bir URL eserleri"". http://localhost (///xyz sen deli gitmek yapacaktır dosyası

2 : emin ol sende POLİTİKASI ve Gizli derlenmiş doğru - işte benim politikası ve bu link alabilirsiniz projeye başlamak ile Signature and Policy -- basmazlar bu JS ile Gizli HİÇ!

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

Burada JS kodu

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

Yardımcı işlevler

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 Formu

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

Mutlu bir İSTASYONDAN-ing!

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • boniver

    boniver

    17 NİSAN 2006
  • hytchme

    hytchme

    9 Mart 2014
  • sonia989

    sonia989

    26 EKİM 2006