Estudei os cenários de negócios que encontrei no trabalho com meus colegas, principalmente para compatibilidade com versões do IE.
Na verdade, coletei alguns pontos de conhecimento e soluções triviais na Internet e depois os integrei. Os pontos principais são os seguintes:
1. Tipo de entrada do IE = visualização da imagem do arquivo requer CSS do filtro do IE
progid:DXImageTransform.Microsoft.AlphaImageLoader
chrome/firefox usa o leitor de arquivos da API de arquivos
2. Para girar a imagem, o IE usa o filtro progid:DXImageTransform.Microsoft.Matrix (os filtros podem ser usados em combinação e separados por espaços)
chrome/firefox usa tela
3. Para fazer upload de imagens, eu uso o formulário no iframe invisível para adicionar dinamicamente input[type=file] para conseguir isso. Chrome/firefox pode usar xhr, mas estou com preguiça de modificá-lo.
4. Para fazer upload de imagens sem atualizar a página e poder selecionar arquivos repetidamente, um iframe é usado para manter uma lista de input[type=file], o que é bastante inteligente.
Você pode consultar o código abaixo, que é principalmente um html principal e, em seguida, dois html iframe. Os dados retornados pelo servidor carregado são o nome do arquivo carregado com sucesso, que é usado para excluir a imagem de visualização.
Copie o código do código da seguinte forma:
// Carregar retorno de chamada
// resultList -> ['file1', 'file2'] é o nome do arquivo que foi carregado com sucesso
var uploadCallback = function(listaresultados){
console.log(JSON.stringify(resultList));
var eu = 0;
for(; i <listaresultados.length; i++){
var índice = listaresultados[i].substr('arquivo'.comprimento);
$(':caixa de seleção[valor=' + índice + ']').parent().parent().remove();
}
};
$(função(){
//Salva o ângulo de rotação da imagem para que ela possa ser enviada ao servidor para processamento
var rotacionarAng = {};
// Número de série usado para nomear o sufixo
varcc = 0;
// Se for chrome/ff, você precisa usar o arquivo api para gerar img
var genImgTpl = função(entrada, índice){
retornar '<img src="/webx/public/1.png" id="img' + índice + '" />';
};
var readImgFromInput = function(_input, índice){
var entradaDom = _input[0];
//cromo/ff
if(inputDom['arquivos']){
var leitor = new FileReader();
leitor.onload = função(e){
$('img.main:último').attr({src: e.target.result});
}
leitor.readAsDataURL(inputDom['arquivos'][0]);
}outro{
var src = _input[0].valor;
var imgDom = $('#img' + índice);
imgDom.attr('src-old', src);
imgDom.css({
float: 'esquerda',
posição: 'relativo',
estouro: 'escondido',
largura: '195px',
altura: '195px'
});
imgDom.css({'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=/"" + src + "/")"});
}
};
var showImg = function(_input){
índice var = ++cc;
_input.addClass('ocultar');
_input.attr('nome', 'arquivo' + índice);
_input.attr('índice de dados', índice);
var iframeWin = $('#choose')[0].contentWindow;
iframeWin.addInput(_input);
var tpl = '<div>' + genImgTpl(_input, índice) +
'<span><input type="checkbox" value="' + índice + '"checked="true" /></span>' +
'<span><img src="img/rightBtn.png" /></span>' +
'</div>';
$('#imgDiv').append(tpl);
readImgFromInput(_entrada, índice);
};
var addAnother = function(){
$('#uploadBtn').before('<input type="file" name="file" />');
};
//Evento de ligação de input[type=file]
$('#uploadDiv input').live('change', function(){
var caminho = este.valor;
if(!caminho){
retornar;
}
mostrarImg($(este));
addAnother();
});
// Você pode remover a entrada durante a caixa de seleção
// $('#imgDiv input:checkbox').live('change', function(){
// var isChecked = $(this).is(':checked');
//console.log(isChecked);
// });
$('#imgDiv span.turn-right').live('clique', function(){
//O ângulo da última rotação
var índice = $(this).siblings('span.choose').find('input').val();
var oldAng = girarAng[índice] || 0;
var novoAng = antigoAng + 90;
girarAng[índice] = novoAng;
$('#img' + índice).rotate(90);
});
// Quando o formulário for enviado, exclua o input[type=file] não escolhido de acordo com a caixa de seleção
$('#uploadBtn').click(function(){
var escolhidoNum = $('#imgDiv input:checkbox').filter(':checked').length;
if(!Num escolhido){
alert('Selecione um arquivo para enviar!');
retornar falso;
}
//Array de número de série selecionado
var ChooseIndexList = $('#imgDiv input:checkbox').filter(':checked').map(function(){
retorne este.valor;
}).pegar();
// Dois iframes, um input[type=file] para salvar a seleção
// Um para upload do formulário
var uploadIframe = $('#upload')[0].contentWindow;
var escolhaIframe = $('#choose')[0].contentWindow;
var eu = 0;
for(; i < listaIndexEscolha.length; i++){
var índice = listaIndexEscolha[i];
var inputFile = escolhaIframe.$('#uploadDiv input').filter('[data-index=' + index + ']');
uploadIframe.$('#uploadForm').append(inputFile);
//Graus de rotação
var ang = rotacionarAng[índice] || 0;
if(% 360 != 0){
var tplInput = '<input type="hide" name="ang' + index + '" value="' + ang + '" />';
uploadIframe.$('#uploadForm').append(tplInput);
}
}
uploadIframe.doUpload();
retornar falso;
});
});
Não há problema em testar no IE7, 8, 9 e Chrome