'html5'ランタイムでs3に直接pluploadを実装する方法は？

Question

アマゾンはHTML5を使ってCORSのアップロードを許可していますが、誰もが 'html5'ランタイムを使ってs3にファイルをプッシュするようにpluploadを設定することができたという非常に関連した質問（Upload directly to Amazon S3 using Plupload HTML5 runtime）関連する質問に対する回答は実装の詳細を提供しません。ここで

私の現在のplupload構成されています

$("#uploader").plupload({ 
    // General settings 
    runtimes: 'html5,flash', 
    url: 'http://s3.amazonaws.com/' + $('#Bucket').val(), 
    max_file_size: '20mb', 
    multipart: true, 
    multipart_params: { 
     'key': '${filename}', // use filename as a key 
     'Filename': '${filename}', // adding this to keep consistency across the runtimes 
     'acl': $('#Acl').val(), 
     'Content-Type': 'binary/octet-stream', 
     'success_action_status': '201', 
     'AWSAccessKeyId': $('#AWSAccessKeyId').val(), 
     'policy': $('#Policy').val(), 
     'signature': $('#Signature').val() 
    }, 
    file_data_name: 'file', 
    multiple_queues: true, 
    filters: [ 
     { title: "Image files", extensions: "jpg,png,gif,jpeg" } 
    ], 
    flash_swf_url: '/Scripts/plupload/plupload.flash.swf', 
}); 

上記のコードは「フラッシュ」ランタイムのために働いているので、ポリシーが生成され、正しく署名されています。

multipart_params設定オブジェクトに引数がありません。また

、私は私のS3バケットに、次のCORS設定を使用しています：

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
    <CORSRule> 
     <AllowedOrigin>*</AllowedOrigin> 
     <AllowedMethod>PUT</AllowedMethod> 
     <AllowedMethod>POST</AllowedMethod> 
     <AllowedMethod>GET</AllowedMethod> 
     <AllowedMethod>HEAD</AllowedMethod> 
     <MaxAgeSeconds>3000</MaxAgeSeconds> 
     <AllowedHeader>*</AllowedHeader> 
    </CORSRule> 
</CORSConfiguration> 

私は「HTML5」pluploadランタイムからCORSのアップロードを許可するようにS3バケットに他の設定を変更する必要がありますか？

Answer 1

はここ

var params = {}; 

     $('#uploader').pluploadQueue({ 
      runtimes: 'html5,flash', 
      flash_swf_url: '/js/plupload/1.5.4/plupload.flash.swf', // Have to load locally 
      url: 'https://s3.amazonaws.com/my-bucket-name', 
      multiple_queues: true, 
      preinit: { 
       UploadFile: function (up, file) { 
        up.settings.multipart_params = { 
         key: file.name, 
         filename: file.name, 
         AWSAccessKeyId: 'my-aws-access-key', 
         acl: 'private', 
         policy: params[file.name]["policy"], 
         signature: params[file.name]["signature"], 
         success_action_status: '201' 
        } 
       } 
      }, 
      init: { 
       FilesAdded: function (up, files) { 
        plupload.each(files, function (file) { 

         $.ajax({ 
          url: '/r/prepare_raw_upload', 
          type: 'post', 
          data: { 
           acl: 'private', 
           bucket: 'my-bucket-name', 
           file: file.name 
          }, 
          success: function (data) { 
           if (data.success) { 
            params[data.file] = { policy: data.policy, signature: data.signature }; 
           } 
           else if (data.message) { 
            alert(data.message); 
           } 
          } 
         }); 

        }); 
       } 
      } 
     }); 

あなたは、私がAJAX呼び出しを持ってFilesAddedイベントリスナーに気づくでしょう...私はこの作業を取得するために使用される正確なコードです。これにより、追加されたファイルごとにサーバーからのポリシーと署名が取得されます。

ここでCORSがポリシーを送り返す背面にコード署名

public static Dictionary<string, object> prepareUpload(DateTime now, string acl, string bucket, string key, string file) 
    { 
     Dictionary<string, object> result = new Dictionary<string, object>(); 
     ASCIIEncoding encoding = new ASCIIEncoding(); 

     string policy = createUploadPolicy(now, acl, bucket, key); 
     result.Add("policy", Convert.ToBase64String(encoding.GetBytes(policy))); 
     result.Add("signature", createUploadSignature(policy)); 
     result.Add("file", file); 

     return result; 
    } 

    public static string createUploadPolicy(DateTime now, string acl, string bucket, string key) 
    { 
     ASCIIEncoding encoding = new ASCIIEncoding(); 
     JavaScriptSerializer jss = new JavaScriptSerializer(); 

     Hashtable policy = new Hashtable(); 
     policy.Add("expiration", now.AddDays(1).ToString("yyyy'-'MM'-'dd'T'HH':'mm':'ss.fff'Z'")); 
     ArrayList conditions = new ArrayList(); 
     conditions.Add(new Hashtable { { "acl", acl } }); 
     conditions.Add(new Hashtable { { "bucket", bucket } }); 
     conditions.Add(new Hashtable { { "key", key } }); 
     conditions.Add(new ArrayList { "starts-with", "$name", "" }); 
     conditions.Add(new ArrayList { "starts-with", "$filename", "" }); 
     conditions.Add(new ArrayList { "starts-with", "$success_action_status", "" }); 
     policy.Add("conditions", conditions); 

     return jss.Serialize(policy); 
    } 

    public static string createUploadSignature(string policy) 
    { 
     ASCIIEncoding encoding = new ASCIIEncoding(); 
     byte[] policyBytes = encoding.GetBytes(policy); 
     string policyBase64 = Convert.ToBase64String(policyBytes); 

     byte[] secretKeyBytes = encoding.GetBytes(ConfigurationManager.AppSettings["AWSSecretKey"]); 
     HMACSHA1 hmacsha1 = new HMACSHA1(secretKeyBytes); 

     byte[] policyBase64Bytes = encoding.GetBytes(policyBase64); 
     byte[] signatureBytes = hmacsha1.ComputeHash(policyBase64Bytes); 

     return Convert.ToBase64String(signatureBytes); 
    } 

非常に役に立っリンクは...この作品を作っていたのです

How do I make Plupload upload directly to Amazon S3?

http://codeonaboat.wordpress.com/2011/04/22/uploading-a-file-to-amazon-s3-using-an-asp-net-mvc-application-directly-from-the-users-browser/