从浏览器到Amazon S3与图片上传问题 [英] Problems with image upload from browsers to Amazon S3

问题描述

最近我已经实现图片上传到Amazon S3从JavaScript在浏览器中。我已经聚焦到火狐，Chrome和IE浏览器而已。

Recently I have implemented image upload to Amazon S3 from javascript in browser. I have focused to FireFox, Chrome and IE only.

最后我没有设法实现它的IE浏览器 - 任何版本（甚至10）

At the end I have not managed to implement it for IE - any version(even 10).

在用例是这样的：

1. 选择本地图片文件
2. 在发送文件的大小，MIME内容类型和文件名到服务器的云。
3. 请的base64缩略图出图像文件的
4. 服务器在云中进行数字签名并寄给我的所有重要数据，并上传网址
5. 获取的数据和表格XHR：XMLHtt prequest对象
6. 在使用POST的方式，上传文件超过的multipart / form-data的请求使用还提供了数据（ACL，重点，内容类型，AWSAccessKey，签名，政策和文件）

另一个重要的事情是浏览器的位置协议为https。

The another important thing is that browsers' location protocol is https.

问题： 我主要在IE浏览器遇到的几个问题。

Problems: I have run into several problems, mostly on IE.

1. 在阅读文件的大小，MIME类型，或者本地路径是不可能在IE中小于10。
2. 在IE小于10不能读取的base64创建本地文件的内容
。

3. IE 10可以做到这一点的东西（1和2），但有一个问题，xhr.open（POST，网址，真实的） - 它崩溃时，URL以http：//（浏览器调用它从 https://something.com/more/stuff ）

3.1。如果浏览器是HTTP的工作原理。

3.1. If browser is on http it works.

3.2。如果POST请求要求URL以https开头：//它不会崩溃，但它无法上传 3.2.1。同为3.2的是发生在火狐

3.2. if POST request is called for url that starts with https:// it doesn't crash but it fails uploading 3.2.1. The same as 3.2 is happening on the FireFox

不接受的解决办法：

1. 在一切工作的时候，浏览器和目标网址以http：//
2. 使用Flash插件

这将是非常，非常好，如果该解决方案将支持老版本浏览器，如果它支持IE9 +，并确定是否只支持IE10将是非常不错的。当然，FF和铬应该与也。

It would be really, really good if the solution would support older browsers, it would be very good if it supports IE9+, and ok if supports just IE10. Of course FF and Chrome should work with it also.

下面是code，工程的一部分，但有一个问题（问题3）：

Here is a part of code that works, but have an issue (problem 3):

function sendFile(putFields){
var xhr = new getXHRObject(); // returns new XMLHttpRequest object.
var url = 'http://'+putFields.bucket+"."+putFields.host+"/";
xhr.onreadystatechange=function(){
   if (http.readyState==4&&null!=http.status&&(http.status==200||http.status==201
        ||http.status==202||http.status==204||http.status==205||http.status==0)){
        alert('success!');
    }else if (http.readyState==4){
        alert('fail ');
    }
}

 var params={
        'acl':""+putFields.acl,
        'key':""+putFields.key,
        'Content-Type':putFields.contentType,
        'AWSAccessKeyId':putFields.awsAccessKeyId,
        'signature':putFields.signature,//encodeURIComponent()
        'policy':""+putFields.policy,
        'file':aFile
 };
 var fData = new FormData();

 for (var p in params)
     fData.append(p,params[p]);

xhr.open("POST", postUrl, true); // IE crashes here when https-->http is the case
setTimeout(function(){ xhr.send(fData);}, 100);
}

我试图找到解决方案，这有一段时间了，但没有真正的成功， 请大家帮忙！

I am trying to find solution for this for some time now but with no real success, please help!

推荐答案

如果任何一个仍然得到这个错误，我发现，添加的contentType'固定它

If any one still gets this error, I found that adding 'contentType' fixed it

$('.uploadAssets').ajaxForm( {
    dataType:               'json',
    contentType:            'application/json; charset=utf-8',//added this line and problem solved
    beforeSend:             beforeuploadAssetsPostForm,
    success:                uploadAssetsFormResponse,
    error:                  uploadAssetsError
});

这篇关于从浏览器到Amazon S3与图片上传问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！