工作中遇到的業務場景，和同事一起研究了下，主要是為了相容IE版本
其實就是一些瑣碎的知識點在網路上蒐集下解決方式，然後整合了下，主要有以下要點：
1. IE input type=file的圖片預覽要用IE的filter css
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox則用File api的file reader
2. 圖片旋轉，IE用progid:DXImageTransform.Microsoft.Matrix的filter（filter可以組合用，用空格隔開）
chrome/firefox用canvas
3. 上傳圖片，我用的都是看不見的iframe 裡的form動態的新增input[type=file]去實現。 chrome/firefox可以用xhr，但我懶得去修改了
4. 其中為了實現上傳圖片不刷新本頁面，又能重複選擇文件，所以還用一個iframe專門維護一個input[type=file]的列表，比較偷巧。
可以參考下程式碼，主要是一個主html，然後兩個iframe的html，上傳的服務端回傳的資料為上傳成功的file name，用於刪除預覽圖。
複製代碼代碼如下:
// 上傳回呼
// resultList -> ['file1', 'file2'] 為上傳成功的file name
var uploadCallback = function(resultList){
console.log(JSON.stringify(resultList));
var i = 0;
for(; i < resultList.length; i++){
var index = resultList[i].substr('file'.length);
$(':checkbox[value=' + index + ']').parent().parent().remove();
}
};
$(function(){
// 儲存圖片旋轉的角度，以便提交給服務端處理
var rotateAng = {};
// 用於命名後綴的序號
var cc = 0;
// 如果是chrome/ff，就需要用file api去產生img
var genImgTpl = function(input, index){
return '<img src="/webx/public/1.png" id="img' + index + '" />';
};
var readImgFromInput = function(_input, index){
var inputDom = _input[0];
// chrome/ff
if(inputDom['files']){
var reader = new FileReader();
reader.onload = function(e){
$('img.main:last').attr({src : e.target.result});
}
reader.readAsDataURL(inputDom['files'][0]);
}else{
var src = _input[0].value;
var imgDom = $('#img' + index);
imgDom.attr('src-old', src);
imgDom.css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '195px',
height: '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = function(_input){
var index = ++cc;
_input.addClass('hide');
_input.attr('name', 'file' + index);
_input.attr('data-index', index);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, index) +
'<span><input type="checkbox" value="' + index + '" checked="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, index);
};
var addAnother = function(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// input[type=file]的綁定事件
$('#uploadDiv input').live('change', function(){
var path = this.value;
if(!path){
return;
}
showImg($(this));
addAnother();
});
// 可以在checkbox時候remove input
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('click', function(){
// 上次旋轉的角度
var index = $(this).siblings('span.choose').find('input').val();
var oldAng = rotateAng[index] || 0;
var newAng = oldAng + 90;
rotateAng[index] = newAng;
$('#img' + index).rotate(90);
});
// 表單提交時候根據checkbox，刪除未choose的input[type=file]
$('#uploadBtn').click(function(){
var choosedNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!choosedNum){
alert('請選擇上傳檔案！');
return false;
}
// 選取的序號數組
var choosedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
return this.value;
}).get();
// 兩個iframe，一個用來儲存選擇的input[type=file]
// 一個用於form upload
var uploadIframe = $('#upload')[0].contentWindow;
var chooseIframe = $('#choose')[0].contentWindow;
var i = 0;
for(; i < choosedIndexList.length; i++){
var index = choosedIndexList[i];
var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
// 旋轉度數
var ang = rotateAng[index] || 0;
if(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
return false;
});
});
IE7、8、9和chrome中測試沒有問題