在文件輸入異步更改的情況下將圖像上載到Amazon S3

Question

我知道jquery-file-upload和uploadify，但是兩者似乎都取決於決定用戶界面的Flash解決方案/后備方式。

如何僅使用javascript異步上傳圖像文件？

每次文件輸入更改時，我都想將圖像上傳到s3，然后將圖像位置異步保存到數據庫。 一些想法：

• 直接發布到Amazon s3，成功發布后將圖像位置發布到數據庫

但是我不確定如何在不暴露敏感的s3密鑰的情況下處理對s3的身份驗證訪問。

另外，如何保證新圖像文件的唯一名稱？

• 以某種方式序列化圖像數據，使用ajax將其發布為字符串

然后，服務器會將其放入s3存儲桶中，保存位置等。是否可以將圖像數據正確序列化並重新制作為圖像？ 我知道您可以使用FileReader顯示預覽圖像，因此潛在地我可以使用它來獲取圖像數據。

---

請讓我知道以上方法之一是否可行，或者是否有一種簡單的方法可以實現以下目的：

$('#file-upload').change(function() {
  // Asynchronously get image on amazon s3 and saved in the database
});

應該可以，但是我看到的所有示例都與插件解決方案的用戶界面緊密相關。

Answer 1

忘了這個問題！ 通過阻止普通表單提交來使其正常工作，如下所示：

var path = $('#form').attr('action');
$('#form').submit(function(evnt) {
  // stop normal submission
  evnt.preventDefault();  

  // POST it asynchronously
  var formData = new FormData(this);
  $.ajax({
    url: path,
    type: 'POST',
    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });
});