将文件上传到amazon s3，异步进行文件输入更改

Question

我知道jquery-file-upload和uploadify，但两者似乎都依赖于决定用户界面的闪存解决方案/后备。

如何使用javascript异步上传图像文件？

每次文件输入更改时，我都希望将图像上传到s3，然后异步将图像位置保存到数据库。一些想法：

• 直接发布到亚马逊s3，并在成功时将图像位置POST到数据库

但是我不知道如何在不泄露敏感的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
  });
});