私は、主に IE のバージョンとの互換性について、職場で遭遇したビジネス シナリオを同僚と研究しました。
実際にネット上で豆知識や解決策を集めて統合しました。主なポイントは次のとおりです。
1. IE 入力タイプ=ファイル画像プレビューには IE フィルター CSS が必要です
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefoxはFile APIのファイルリーダーを使用します
2. 画像を回転するには、IE は progid:DXImageTransform.Microsoft.Matrix のフィルターを使用します (フィルターはスペースで区切って組み合わせて使用できます)
chrome/Firefoxはキャンバスを使用します
3. 画像をアップロードするには、非表示の iframe のフォームを使用して input[type=file] を動的に追加します。 Chrome/Firefox では xhr を使用できますが、修正するのが面倒です。
4. ページを更新せずに画像をアップロードし、ファイルを繰り返し選択できるようにするために、input[type=file] のリストを維持するために iframe が使用されます。これは非常に賢明です。
以下のコードを参照してください。これは主にメイン HTML であり、次に 2 つの iframe HTML です。アップロードされたサーバーから返されるデータは、アップロードに成功したファイル名であり、プレビュー画像を削除するために使用されます。
次のようにコードをコピーします。
// アップロードコールバック
// resultList -> ['file1', 'file2'] はアップロードに成功したファイル名です
var UploadCallback = function(resultList){
console.log(JSON.stringify(resultList));
変数 i = 0;
for(; i < resultList.length; i++){
var インデックス = resultList[i].substr('file'.length);
$(':checkbox[value=' +index + ']').parent().parent().remove();
}
};
$(関数(){
//画像の回転角度を保存して、サーバーに送信して処理できるようにします。
varrotateAng = {};
// 命名サフィックスに使用されるシリアル番号
varcc = 0;
// chrome/ff の場合、ファイル API を使用して画像を生成する必要があります
var genImgTpl = 関数(入力, インデックス){
return '<img src="/webx/public/1.png" id="img' +index + '" />';
};
var readImgFromInput = function(_input,index){
var inputDom = _input[0];
//クローム/ff
if(inputDom['files']){
var リーダー = 新しい FileReader();
Reader.onload = function(e){
$('img.main:last').attr({src : e.target.result});
}
Reader.readAsDataURL(inputDom['files'][0]);
}それ以外{
var src = _input[0].value;
var imgDom = $('#img' + インデックス);
imgDom.attr('src-old', src);
imgDom.css({
フロート: '左'、
位置: '相対'、
オーバーフロー: '非表示'、
幅: '195px',
高さ: '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = function(_input){
変数インデックス = ++cc;
_input.addClass('隠す');
_input.attr('名前', 'ファイル' + インデックス);
_input.attr('データインデックス', インデックス);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, インデックス) +
'<span><input type="checkbox" value="' +index + '"checked="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, インデックス);
};
var addAnother = function(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// input[type=file]のバインディングイベント
$('#uploadDiv input').live('change', function(){
var パス = this.value;
if(!パス){
戻る;
}
showImg($(this));
addAnother();
});
// チェックボックス中の入力を削除できます
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('click', function(){
//最後の回転の角度
var インデックス = $(this).siblings('span.choose').find('input').val();
var oldAng = 回転Ang[インデックス] || 0;
var newAng = oldAng + 90;
回転角度[インデックス] = 新しい角度;
$('#img' + インデックス).rotate(90);
});
// フォームが送信されると、チェックボックスに従って選択されていない input[type=file] を削除します
$('#uploadBtn').click(function(){
var selectedNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!choosedNum){
alert('アップロードするファイルを選択してください!');
false を返します。
}
//選択されたシリアル番号の配列
var selectedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
this.value を返します。
}）。得る（）;
// 2 つの iframe、選択内容を保存する 1 つの input[type=file]
// フォームアップロード用に 1 つ
var UploadIframe = $('#upload')[0].contentWindow;
varchooseIframe = $('#choose')[0].contentWindow;
変数 i = 0;
for(; i < selectedIndexList.length; i++){
var インデックス = selectedIndexList[i];
var inputFile =chooseIframe.$('#uploadDiv input').filter('[data-index=' +index + ']');
UploadIframe.$('#uploadForm').append(inputFile);
//回転角度
var ang = 回転Ang[インデックス] || 0;
if(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' +index + '" value="' + ang + '" />';
UploadIframe.$('#uploadForm').append(tplInput);
}
}
UploadIframe.doUpload();
false を返します。
});
});
IE7,8,9,chromeでのテストは問題ありません