將圖像從瀏覽器上傳到Amazon S3的問題

Question

最近，我已經實現了將圖像從瀏覽器中的javascript上傳到Amazon S3。 我只專注於FireFox，Chrome和IE。

最后，我還沒有為IE實現它-任何版本（甚至10）。

用例是這樣的：

1. 選擇本地圖像文件
2. 將文件大小，mime內容類型和文件名發送到雲中的服務器。
3. 使base64縮略圖超出圖像文件
4. 雲中的服務器進行簽名，並向我發送所有重要數據和url以進行上傳
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。 在FireFox上發生與3.2相同的情況

不可接受的解決方案：

1. 當瀏覽器和目標URL以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
});