Biblioteca mOxie
Achei uma biblioteca capaz de fazer o que você está pedindo.
Trata-se de um polyfill listado no GitHub do modernizr chamado mOxie.
A biblioteca é fantástica, exceto para se iniciar o desenvolvimento. Tive de compilar ela, para depois começar a testar... ai corrigi uns erros de compilação, e uns erros no JavaScript gerado, ai finalmente funcionou.
Usei as seguintes partes do mOxie:
- FileInput: componente que permite selecionar um arquivo e utilizar os arquivo que forem selecionados usando um
FileReader
- FileReader: permite ler um arquivo
- Image: permite manipular imagens, tal como redimensioná-la
Pela dificuldade que tive na compilação, resolvi criar um repositório no GitHub com a versão já compilada:
Exemplo de uso
Coloquei na pasta \v1.2.1\samples
, o exemplo de como fazer o que você falou:
image-preview-before-upload.htm
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="moxie.min.js"></script>
<script>mOxie.Env.swf_url = 'Moxie.swf';</script>
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new mOxie.FileReader();
reader.onload = function (e) {
var img = new mOxie.Image();
img.onload = function() {
img.downsize({width:100});
var tgt = document.getElementById("target");
img.embed(tgt);
};
img.load(e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1">
<div id="container">
<a id="file-picker" href="javascript:;">Browse...</a>
</div>
<script>
var fileInput = new mOxie.FileInput({
browse_button: 'file-picker', // or document.getElementById('file-picker')
container: 'container',
accept: [
{title: "Image files", extensions: "jpg,gif,png"} // accept only images
],
multiple: true // allow multiple file selection
});
fileInput.onchange = function(e) {
// do something to files array
//console.info(e.target.files); // or this.files or fileInput.files
readURL(this);
};
fileInput.init(); // initialize
</script>
<div id="target"></div>
</form>
</body></html>
Compatibilidade
Funciona no IE8 e IE9. Também no Chrome, FireFox e Opera.
Tive problema com o Safari, IE6 e IE7.
Talvez o melhor seja usar uma abordagem seletiva entre a minha resposta, o seu próprio código (deve funcionar no Safari), e a resposta do @CarlosMartins (que usa AlphaImageLoader, pelo que pesquisei funciona no IE6 e IE7). Você poderia usar comentários condicionais para atingir a compatibilidade total se quiser.
Dependências
Para funcionar no IE8 e IE9 o mOxie requer ou Flash ou SilverLight. Parece que eles possuem planos de suportar o uso de Java também, mas por enquanto não tem.