mostrar la imagen seleccionada para cargar en Chrome y mozilla

En una de mis aplicaciones web, debo mostrar la imagen que seleccionó para subirla antes de que se cargue en el servidor, usando javascript.

Tenía este código … Funciona bastante bien en Mozilla. Pero no en Safari o Chrome … Por favor ayuda

// Handle file while select a new file $('#file').change(function(){ $('#img_size').val((this.files[0].size)/1000000); handleFiles(this.files); }); // handle files function handleFiles(files) { for (var i = 0; i < files.length; i++) { var file = files[i]; var imageType = /image.*/; if (!file.type.match(imageType)) { continue; } var img=document.getElementById('fake_img'); img.src = file; img.onload = function() { }; var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } } 

Este código funciona bien en Chrome

http://jsfiddle.net/PrNWY/13/

Muestra la imagen seleccionada en chrome y FF.

actualizar

puede verificar la capacidad del lector de archivos con el siguiente código

 // Check for the various File API support. if (window.File && window.FileReader && window.FileList && window.Blob) { // Great success! All the File APIs are supported. alert('The File APIs are fully supported in this browser.'); } else { alert('The File APIs are not fully supported in this browser.'); } 

En mi safari falló debido a que no soporta completamente la API de archivos.