I studied the business scenarios I encountered at work with my colleagues, mainly for compatibility with IE versions.
In fact, I collected some trivial knowledge points and solutions on the Internet, and then integrated them. The main points are as follows:
1. IE input type=file image preview requires IE filter css
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox uses the file reader of File api
2. To rotate the image, IE uses the filter of progid:DXImageTransform.Microsoft.Matrix (filters can be used in combination and separated by spaces)
chrome/firefox uses canvas
3. To upload images, I use the form in the invisible iframe to dynamically add input[type=file] to achieve this. Chrome/firefox can use xhr, but I'm too lazy to modify it.
4. In order to upload images without refreshing the page, and to be able to select files repeatedly, an iframe is used to maintain a list of input[type=file], which is quite clever.
You can refer to the code below, which is mainly a main html, and then two iframe html. The data returned by the uploaded server is the file name of the uploaded successfully, which is used to delete the preview image.
Copy the code code as follows:
// Upload callback
// resultList -> ['file1', 'file2'] is the file name that was successfully uploaded
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(){
//Save the rotation angle of the image so that it can be submitted to the server for processing
var rotateAng = {};
// Serial number used for naming suffix
varcc = 0;
// If it is chrome/ff, you need to use file api to generate 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" />');
};
// Binding event of input[type=file]
$('#uploadDiv input').live('change', function(){
var path = this.value;
if(!path){
return;
}
showImg($(this));
addAnother();
});
// You can remove input during checkbox
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('click', function(){
//The angle of the last rotation
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);
});
// When the form is submitted, delete the unchosen input[type=file] according to the checkbox
$('#uploadBtn').click(function(){
var chosenNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!choosedNum){
alert('Please select a file to upload!');
return false;
}
//Selected serial number array
var chosenIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
return this.value;
}).get();
// Two iframes, one input[type=file] to save the selection
// One for form upload
var uploadIframe = $('#upload')[0].contentWindow;
var chooseIframe = $('#choose')[0].contentWindow;
var i = 0;
for(; i < chosenIndexList.length; i++){
var index = chosenIndexList[i];
var inputFile = chooseIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Rotation degrees
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;
});
});
There is no problem in testing in IE7, 8, 9 and chrome