Cómo cargar imágenes de la máquina local al objeto JS, evitando que se cargue en el servidor

Question

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?

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?

Answer 1

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/

Answer 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.

Answer 3

Puede utilizar createObjectURL método del objeto window.URL, esto no tiene mucho soporte de los navegadores aunque

http://jsfiddle.net/LvAqp/ sólo funciona en Chrome y Firefox