从浏览器上传图片到 Amazon S3 的问题

Question

最近我在浏览器中实现了从 javascript 将图像上传到 Amazon S3。我只专注于 FireFox、Chrome 和 IE。

最后我还没有设法为 IE 实现它 - 任何版本（甚至 10）。

用例是这样的：

1. 选择本地图片文件
2. 将文件大小、mime 内容类型和文件名发送到云中的服务器。
3. 用图片文件制作base64缩略图
4. 云中的服务器进行签名并将所有重要数据和网址发送给我以供上传
5. 获取数据并形成 xhr:XMLHttpRequest 对象
6. 使用“POST”方法，通过“multipart/form-data”请求上传文件，同时使用提供的数据（acl、密钥、Content-Type、AWSAccessKey、签名、策略和文件）

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

问题： 我遇到了几个问题，主要是在 IE 上。

1. 在 IE
2. IE

3. IE 10 可以做这些事情（1 和 2），但 xhr.open("POST",url,true) 存在问题 - 当 url 以 http:// 开头时它崩溃（浏览器从 @987654321 调用它@)

   3.1。如果浏览器在 http 上它可以工作。

   3.2。如果对以 https:// 开头的 url 调用 POST 请求，它不会崩溃，但上传失败 3.2.1。与 3.2 相同的是在 FireFox 上发生

不可接受的解决方案：

1. 当浏览器和目标网址以 http:// 开头时，一切正常
2. 使用 Flash 插件

如果该解决方案支持旧版浏览器，那就太好了，如果它支持 IE9+，那就太好了，如果只支持 IE10 就可以了。当然 FF 和 Chrome 也可以使用它。

这里有一部分代码可以工作，但是有问题（问题 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);
}

我正在尝试为此寻找解决方案一段时间，但没有真正成功， 请帮忙！

Answer 1

如果还有人遇到这个错误，我发现添加 'contentType' 修复了它

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