2012-07-22 22 views
5

Quiero cargar un archivo de imagen desde la computadora directamente a cualquier objeto js sin usar ningún componente del lado del servidor. Por ejemplo, quiero seleccionar una imagen de la máquina local y mostrarla en una página web. ¿Hay alguna forma de evitar la carga de archivos en el servidor?Cómo cargar imágenes de la máquina local al objeto JS, evitando que se cargue en el servidor

De hecho, quiero escribir un tipo de cargador de imágenes múltiples, pero antes de cargar en el servidor quiero rotar algunas imágenes, crear un archivo xml con algunos datos como ID de usuario, lista de nombres de archivos de imagen y comprimir todo imágenes y este xml y luego enviarlo al servidor. ¿Cómo puedo hacer eso en el lado del cliente?

+0

posible duplicado de [Cargar imagen local en el navegador usando JavaScript ?] (http://stackoverflow.com/questions/3996004/load-local-image-into-browser-using-javascript) – Lix

+0

De hecho, parece que esto no es posible ... – Lix

Respuesta

13

Hay una forma con HTML5, pero requiere que el usuario haya soltado el archivo en un destino de soltar o haya utilizado una casilla <input type="file"/>, ya que de lo contrario, se trataría de un problema de seguridad.

Con la API File puede leer archivos, y específicamente puede usar el método FileReader.readAsDataURL para establecer el contenido como una URL data: para la etiqueta de imagen.

He aquí un ejemplo:

$('#f').on('change', function(ev) { 
    var f = ev.target.files[0]; 
    var fr = new FileReader(); 

    fr.onload = function(ev2) { 
     console.dir(ev2); 
     $('#i').attr('src', ev2.target.result); 
    }; 

    fr.readAsDataURL(f); 
});​ 

http://jsfiddle.net/alnitak/Qszjg/

+0

¿Cómo se relacionan las reglas de origen cruzado? – Christian

+0

@Christian porque restringen el acceso a 'file: ///' si ha cargado una página de 'http: ///'. – Alnitak

+0

No veo cómo se relaciona, ya que no está tratando de acceder a una página diferente o algo así. Si bien existe una política de origen cruzado en términos de acceso a un servidor, siempre puede enviar cosas a un formulario y publicarlas de forma dinámica. – Christian

2

Utilizando el new File APIs, es posible acceder al contenido del disco local.

Usted pone un campo de carga tradicional <input type="file"> en su página, y maneja el evento onchange.

MDN has a good writeup with all of the details.

Su controlador de eventos que contiene consigue un FileListFiles. Desde allí, puede llamar al FileReader.readAsDataURL(File) para buscar el contenido de la imagen y luego pasar esa URL de datos a <img> o <canvas> para hacer la rotación.

Cuestiones relacionadas