javascript - 在文件输入更改时异步上传图像到 amazon s3

Question

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

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

每次文件输入发生变化时，我想将图像上传到s3，然后将图像位置异步保存到数据库。一些想法:

• 直接 POST 到 Amazon s3，成功后将图像位置 POST 到数据库

但是我不确定如何在不泄露敏感 s3 key 的情况下处理对 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
  });
});