¿es posible obtener una vista previa de las imágenes locales antes de cargarlas a través de un formulario?

Question

Para ser más específicos, quiero utilizar un formulario con uno o más campos de entrada de archivos utilizados para las imágenes. Cuando se cambian esos campos, me gustaría mostrar una vista previa de la imagen asociada, antes de enviar los datos al servidor.

He intentado una serie de enfoques javascript, pero siempre encuentro errores de seguridad. No me importaría usar java o flash, siempre que la solución se degrade graciosamente para aquellos usuarios que no los tienen. (No obtendrían vistas previas, y tampoco obtendrían una molesta 'instalación de esta cosa').

¿Alguien ha hecho esto de una manera simple y reutilizable?

P.S. Sé que hay una caja de arena, pero ¿la caja de arena debe estar en una habitación oscura y cerrada con todas las ventanas oscurecidas?

Answer 1

Here's a jQuery + PHP script para cargar una imagen y obtener una vista previa.

Answer 2

JavaScript no tiene acceso al sistema de archivos local por motivos de seguridad, punto.

Answer 3

El primer paso es encontrar la ruta de la imagen. JavaScript puede interrogar el control de carga de un nombre de archivo/ruta, pero (por razones de seguridad) varios navegadores muestran cosas diferentes al motor JS que muestran al usuario: tienden a mantener intacto el nombre de archivo para que al menos pueda validar su extensión, pero puede obtener c:\fake_path\ o algo similarmente ofuscado antes del nombre del archivo. Probar esto en varios navegadores te dará una idea de lo que se devuelve como una ruta real, y lo que se falsifica, y dónde.

El segundo paso es mostrar la imagen. Es posible visualizar imágenes locales si conoce sus rutas, a través de las etiquetas img con file:// URL de origen, si el navegador del usuario permite el esquema file://. (Firefox no lo hace, por defecto.) Entonces, si puede hacer que el usuario le diga cuál es la ruta completa de la imagen, al menos puede intentar cargarla.

Answer 4

Solo he visto applets de Java que hacen esto, por ejemplo, el applet de carga de imágenes en Facebook. La desventaja del enfoque de Java es que se le pedirá al usuario que confíe en el applet antes de ejecutarlo, lo cual es una especie de molestia, pero esto permite que el applet presente un explorador de archivos con vistas previas de imágenes o haga cosas más interesantes como permitir al usuario para cargar un directorio completo.

Answer 5

No hay necesidad de cosas sofisticadas. Todo lo que necesita es la función createObjectURL, que crea una URL que se puede usar como la imagen src, y puede proceder directamente de un archivo local.

Digamos que seleccionó un par de imágenes de la computadora del usuario usando un elemento de entrada de archivo (<input type="file" />). He aquí cómo usted podría crear vistas previas de archivos de imagen para que:

function createObjectURL(object) { 
    return (window.URL) ? window.URL.createObjectURL(object) : window.webkitURL.createObjectURL(object); 
} 

function revokeObjectURL(url) { 
    return (window.URL) ? window.URL.revokeObjectURL(url) : window.webkitURL.revokeObjectURL(url); 
} 

function myUploadOnChangeFunction() { 
    if(this.files.length) { 
     for(var i in this.files) { 
      var src = createObjectURL(this.files[i]); 
      var image = new Image(); 
      image.src = src; 
      // Do whatever you want with your image, it's just like any other image 
      // but it displays directly from the user machine, not the server! 
     } 
    } 
} 

Answer 6

Puede probar este enfoque, aunque parece que no funciona en IE.

http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/

Es muy sencillo y rápido de código.

pongo el código aquí por si acaso la fuente muere:

Guión:

<!-- Assume jQuery is loaded --> 
    <script> 
     function readURL(input) { 
     if (input.files && input.files[0]) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
      $('#img_prev') 
       .attr('src', e.target.result) 
       .width(150) 
       .height(200); 
      }; 

      reader.readAsDataURL(input.files[0]); 
     } 
     } 
    </script> 

En el código HTML:

<!--[if IE]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
    </head> 
    <body> 
     <input type='file' onchange="readURL(this);" /> 
     <img id="img_prev" src="#" alt="your image" /> 
    </body>