주로 IE 버전과의 호환성을 위해 동료들과 함께 직장에서 접한 비즈니스 시나리오를 연구했습니다.
실제로 인터넷에서 몇 가지 사소한 지식 포인트와 솔루션을 수집하고 이를 통합한 주요 내용은 다음과 같습니다.
1. IE 입력 유형=파일 이미지 미리보기에는 IE 필터 CSS가 필요합니다.
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox는 File api의 파일 리더를 사용합니다.
2. 이미지를 회전하기 위해 IE는 progid:DXImageTransform.Microsoft.Matrix 필터를 사용합니다(필터는 조합하여 사용할 수 있으며 공백으로 구분할 수 있음).
크롬/파이어폭스는 캔버스를 사용합니다
3. 이미지를 업로드하려면 보이지 않는 iframe의 양식을 사용하여 동적으로 input[type=file]을 추가합니다. Chrome/firefox는 xhr을 사용할 수 있지만 수정하기에는 너무 게으르다.
4. 페이지를 새로 고치지 않고 이미지를 업로드하고 파일을 반복적으로 선택할 수 있도록 iframe을 사용하여 입력[유형=파일] 목록을 유지하는 것이 매우 영리합니다.
아래의 코드는 주로 기본 HTML이고 그 다음에는 두 개의 iframe html을 참조할 수 있습니다. 업로드된 서버에서 반환된 데이터는 성공적으로 업로드된 파일 이름이며 미리보기 이미지를 삭제하는 데 사용됩니다.
다음과 같이 코드 코드를 복사합니다.
// 콜백 업로드
// resultList -> ['file1', 'file2']는 성공적으로 업로드된 파일 이름입니다.
var uploadCallback = function(resultList){
console.log(JSON.stringify(resultList));
var 나는 = 0;
for(; i < resultList.length; i++){
var index = resultList[i].substr('file'.length);
$(':checkbox[value=' + index + ']').parent().parent().remove();
}
};
$(함수(){
//처리를 위해 서버에 제출할 수 있도록 이미지의 회전 각도를 저장합니다.
var RotateAng = {};
// 접미사 이름 지정에 사용되는 일련 번호
varcc = 0;
// chrome/ff인 경우 파일 api를 사용하여 img를 생성해야 합니다.
var genImgTpl = 함수(입력, 인덱스){
'<img src="/webx/public/1.png" id="img' + 인덱스 + '" />'를 반환합니다.
};
var readImgFromInput = function(_input, 인덱스){
var inputDom = _input[0];
//크롬/ff
if(inputDom['파일']){
var reader = 새로운 FileReader();
reader.onload = 함수(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 = 함수(_input){
var 인덱스 = ++cc;
_input.addClass('hide');
_input.attr('이름', '파일' + 색인);
_input.attr('data-index', index);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, index) +
'<span><input type="checkbox" value="' + 색인 + '"checked="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, index);
};
var addAnother = 함수(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
// input[type=file] 바인딩 이벤트
$('#uploadDiv 입력').live('변경', function(){
var 경로 = this.value;
if(!경로){
반품;
}
showImg($(this));
addAnother();
});
// 체크박스 중에 입력을 제거할 수 있습니다.
// $('#imgDiv 입력:체크박스').live('변경', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDivspan.turn-right').live('클릭', function(){
//마지막 회전 각도
var index = $(this).siblings('span.choose').find('input').val();
var oldAng = RotateAng[index] ||
var newAng = oldAng + 90;
RotateAng[index] = newAng;
$('#img' + index).rotate(90);
});
// 양식이 제출되면 체크박스에 따라 선택되지 않은 input[type=file]을 삭제합니다.
$('#uploadBtn').click(함수(){
var selectedNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!choosedNum){
Alert('업로드할 파일을 선택해주세요!');
거짓을 반환;
}
//선택된 일련번호 배열
var selectedIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
this.value를 반환합니다.
}).얻다();
// 두 개의 iframe, 하나의 input[type=file] 선택 항목 저장
// 양식 업로드용 하나
var uploadIframe = $('#upload')[0].contentWindow;
var chooseIframe = $('#choose')[0].contentWindow;
var 나는 = 0;
for(; i < selectedIndexList.length; i++){
var index = selectedIndexList[i];
var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//회전 각도
var ang = RotateAng[index] ||
if(ang % 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
거짓을 반환;
});
});
IE7, 8, 9 및 크롬에서 테스트하는데 문제가 없습니다.