最近、ブラウザのjavascriptからAmazonS3への画像アップロードを実装しました。私はFireFox、Chrome、IEのみに焦点を当ててきました。
結局、私はそれをIEに実装することができませんでした-どのバージョン（10でも）。
ユースケースは次のようなものでした。
- ローカル画像ファイルを選択します
- ファイルサイズ、MIMEコンテンツタイプ、ファイル名をクラウド内のサーバーに送信します。
- 画像ファイルからbase64サムネイルを作成する
- クラウド内のサーバーが署名を行い、アップロード用のすべての重要なデータとURLを送信します
- データを取得し、xhr：XMLHttpRequestオブジェクトを形成します
- 「POST」メソッドを使用して、提供されたデータ（acl、key、Content-Type、AWSAccessKey、signature、policy、file）も使用して、「multipart/form-data」リクエストでファイルをアップロードします。
もう1つの重要なことは、ブラウザのロケーションプロトコルがhttpsであるということです。
問題： 主にIEでいくつかの問題が発生しました。
- IE <10では、ファイルのサイズ、mimeタイプ、またはローカルパスを読み取ることはできません。
- IE <10は、base64作成用のローカルファイルコンテンツを読み取ることができません。
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で起こっています
受け入れられない解決策：
- ブラウザとリンク先URLがhttp：//で始まる場合、すべてが機能します
- フラッシュプラグインを使用する
ソリューションが古いブラウザをサポートする場合は本当に、本当に良いでしょう。IE9+をサポートする場合は非常に良いでしょう。そして、IE10だけをサポートする場合はOKです。もちろん、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);
}
私はしばらくの間これの解決策を見つけようとしていますが、本当の成功はありません、助けてください！