使用jQuery fileupload插件直接上傳到Amazon S3

Question

我正在使用https://github.com/blueimp/jQuery-File-Upload將文件上傳到我的Rails應用程序上的S3（安裝了gem： https : //github.com/tors/jquery-fileupload-rails ）。

這是我的表格。 因為我只需要上傳文件並稍后創建文檔，所以它不是form_for。

  <%= form_tag 'Bucket URL SNIP', :multipart => true, :id => "fileupload" do %>
  <%= hidden_field_tag 'key', @token %>
  <%= hidden_field_tag 'AWSAccessKeyId', ACCESSKEYSNIP %>
  <%= hidden_field_tag 'acl', 'public-read' %>
  <%= hidden_field_tag 'success_action_status', '200' %>
  <%= hidden_field_tag 'policy', controller.s3_policy_document %>
  <%= hidden_field_tag 'signature', controller.signature %>
  <% end %>

jQuery上傳器的初始化如下：

  $(function () {

      $('#fileupload').fileupload({

        forceIframeTransport: true

      });

  });

一切正常，我看到了UI，但是當文件的進度條完成時，它給了我一個錯誤，並且文件實際上沒有被上傳。

TypeError：iframe未定義。 （Firefox）TypeError：TypeError：無法讀取未定義的屬性“ 0”（Chrome）

可能是什么問題呢？

編輯：

在Javascript控制台中，我看到這樣的錯誤（替換了真實地址）：

Unsafe JavaScript attempt to access frame with URL BUCKETURL from frame with URL SERVERURL. Domains, protocols and ports must match.

Answer 1

我最近寫了一個簡短的教程，關於如何將文件直接上傳到s3，希望它能對您有所幫助：

http://pjambet.github.com/blog/direct-upload-to-s3/

Answer 2

Amazon AWS最近宣布支持CORS。 這意味着您不必使用iframe方法直接上傳到S3。 現在，您可以放心使用HTML5。

它還將允許您使用拖放功能。

要啟用直接HTML5上傳，只需在存儲桶屬性中調整存儲桶CORS設置即可。