Estudié los escenarios comerciales que encontré en el trabajo con mis colegas, principalmente para determinar la compatibilidad con las versiones de IE.
De hecho, recopilé algunos puntos de conocimiento y soluciones triviales en Internet y luego los integré. Los puntos principales son los siguientes:
1. Tipo de entrada de IE = la vista previa de la imagen del archivo requiere el filtro CSS de IE
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox usa el lector de archivos de File api
2. Para rotar la imagen, IE usa el filtro de progid:DXImageTransform.Microsoft.Matrix (los filtros se pueden usar en combinación y separados por espacios)
chrome/firefox usa lienzo
3. Para cargar imágenes, uso el formulario en el iframe invisible para agregar dinámicamente entrada [tipo = archivo] para lograrlo. Chrome/firefox puede usar xhr, pero soy demasiado vago para modificarlo.
4. Para cargar imágenes sin actualizar la página y poder seleccionar archivos repetidamente, se utiliza un iframe para mantener una lista de entradas [tipo = archivo], lo cual es bastante inteligente.
Puede consultar el código a continuación, que es principalmente un html principal y luego dos iframe html. Los datos devueltos por el servidor cargado son el nombre del archivo cargado correctamente, que se utiliza para eliminar la imagen de vista previa.
Copie el código de código de la siguiente manera:
// Subir devolución de llamada
// lista de resultados -> ['archivo1', 'archivo2'] es el nombre del archivo que se cargó correctamente
var uploadCallback = función (lista de resultados) {
console.log(JSON.stringify(listaderesultados));
var i = 0;
for(; i < listaResultados.longitud; i++){
var index = resultList[i].substr('archivo'.length);
$(':casilla de verificación[valor=' + índice + ']').parent().parent().remove();
}
};
$(función(){
//Guarda el ángulo de rotación de la imagen para poder enviarla al servidor para su procesamiento.
var rotarAng = {};
// Número de serie utilizado para nombrar el sufijo
varcc = 0;
// Si es chrome/ff, necesitas usar el archivo api para generar img
var genImgTpl = función(entrada, índice){
return '<img src="/webx/public/1.png" id="img' + índice + '" />';
};
var readImgFromInput = función(_entrada, índice){
var inputDom = _entrada[0];
//cromo/ff
if(inputDom['archivos']){
var lector = nuevo FileReader();
lector.onload = función(e){
$('img.main:last').attr({src: e.target.result});
}
lector.readAsDataURL(inputDom['archivos'][0]);
}demás{
var src = _entrada[0].valor;
var imgDom = $('#img' + índice);
imgDom.attr('src-old', src);
imgDom.css({
flotador: 'izquierda',
posición: 'relativa',
desbordamiento: 'oculto',
ancho: '195px',
altura: '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = función(_entrada){
índice var = ++cc;
_input.addClass('ocultar');
_input.attr('nombre', 'archivo' + índice);
_input.attr('índice de datos', índice);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, índice) +
'<span><tipo de entrada="casilla de verificación" valor="' + índice + '" verificado="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_input, índice);
};
var agregarOtro = función(){
$('#uploadBtn').before('<input type="file" name="archivo" />');
};
// Evento vinculante de entrada[tipo=archivo]
$('#uploadDiv input').live('cambiar', función(){
var ruta = this.value;
si(!ruta){
devolver;
}
showImg($(esto));
agregarOtro();
});
// Puedes eliminar la entrada durante la casilla de verificación
// $('#imgDiv entrada:casilla de verificación').live('cambiar', función(){
// var estáComprobado = $(this).is(':comprobado');
// console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('hacer clic', función(){
//El ángulo de la última rotación.
var index = $(this).siblings('span.choose').find('input').val();
var oldAng = rotarAng[índice] || 0;
var nuevoAng = antiguoAng + 90;
rotarAng[índice] = nuevoAng;
$('#img' + índice).rotate(90);
});
// Cuando se envía el formulario, elimina la entrada no elegida [tipo=archivo] de acuerdo con la casilla de verificación
$('#uploadBtn').hacer clic(función(){
var Num elegido = $('#imgDiv input:checkbox').filter(':checked').length;
si(!numelegido){
alert('¡Seleccione un archivo para cargar!');
devolver falso;
}
//Matriz de números de serie seleccionados
var elegidoIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
devolver este valor;
}).conseguir();
// Dos iframes, un input[type=file] para guardar la selección
// Uno para cargar el formulario
var uploadIframe = $('#upload')[0].contentWindow;
var elegirIframe = $('#choose')[0].contentWindow;
var i = 0;
for(; i < listaIndexElegida.length; i++){
var índice = lista de índices elegidos[i];
var inputFile = elegirIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Grados de rotación
var ang = rotarAng[índice] || 0;
si(ang % 360 != 0){
var tplInput = '<tipo de entrada="ocultar" nombre="ang' + índice + '" valor="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
subirIframe.doUpload();
devolver falso;
});
});
No hay problema al realizar pruebas en IE7, 8, 9 y Chrome.