0

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

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

用例是这样的：

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

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

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

  1. 在 IE<10 中无法读取文件的大小、mime 类型或本地路径。
  2. IE<10 无法读取本地文件内容以创建 base64。

  3. IE 10 可以做这些事情（1 和 2）但是 xhr.open("POST",url,true) 有问题 - 当 url 以 http:// 开头时它崩溃（浏览器从https://something调用它.com/more/stuff）

    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);
}

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

4

1 回答 1

1

如果有人仍然收到此错误，我发现添加 'contentType' 修复了它

$('.uploadAssets').ajaxForm( {
    dataType:               'json',
    contentType:            'application/json; charset=utf-8',//added this line and problem solved
    beforeSend:             beforeuploadAssetsPostForm,
    success:                uploadAssetsFormResponse,
    error:                  uploadAssetsError
});
于 2013-07-05T07:43:24.147 回答