Comprensión <input type = "file">

Estoy tratando de entender y usar la imagen seleccionada en un sitio web.Comprensión <input type = "file">

Digamos que tengo un sitio web simple que permite al usuario seleccionar una imagen de su sistema usando:

<input type="file" id="userImage">

Luego, en el código JavaScript que pueda hacer esto para obtener el archivo:

var userImage = document.getElementById('#userImage').files[0];

Preguntas:

1) ¿Puedo ahora usar userImage? ¿Como dibujarlo en un lienzo, o necesito subirlo primero al servidor de sitios web?

2) Si utilizo la imagen, ¿el sitio web tiene que subirla cada vez que la uso, o permanece en la memoria?

3) ¿Cómo puedo saber cuándo la imagen está lista para usar? (Por las mismas razones todas las imágenes deben estar precargados en el inicio antes de dibujado sobre tela)

Muchas gracias por su ayuda :)

de seguimiento

Gracias por sus respuestas. Parece que es posible en html5 pero aún no es universalmente compatible.

Fuente

2012-08-24 Jamie Fearon

En HTML4 esto no sería posible, pero en HTML5 debería poder acceder a los archivos locales usando el W3 File API. Sin embargo, no estoy seguro de cuándo (y cómo) será compatible con los diferentes navegadores. En mi Firefox 14.0.1 local, el siguiente código funciona y produce los datos binarios del archivo seleccionado:

var reader = new FileReader() 
reader.readAsDataURL(document.getElementById('userImage').files[0]) 
alert(reader.result)

La siguiente página pinta una imagen local en un lienzo:

<html> 
    <body> 
    <script type="text/javascript"> 
     function doIt() { 
     var reader = new FileReader(); 
     reader.onload = (function(e) { 
      var img = new Image(); 
      img.src = e.target.result; 
      var c = document.getElementById("canvas"); 
      var ctx = c.getContext("2d"); 
      ctx.drawImage(img,10,10); 
      } 
     ); 
     reader.readAsDataURL(document.getElementById('userImage').files[0]); 
     } 
    </script> 

    <input type="file" id="userImage" /> 
    <button onclick="doIt()">Render Image</button><br/> 
    <canvas id="canvas" style="border: 1px solid black; height: 400px; width: 400px;"/> 
    </body> 
</html>

tal vez debería considere leer 2.

Fuente

2012-08-24 10:29:35 tbl

Gracias por sus respuestas. Parece que es posible en html5 pero aún no es universalmente compatible. –

+1 - buena solución y código – techfoobar

Puede encontrar información actualizada sobre el soporte para la API FileReader en http://caniuse.com/#feat=filereader – garethm

-3

1) No puede abrir o modificar la imagen porque los scripts del lado del cliente se ejecutan en el entorno limitado del navegador. Si los scripts pueden acceder al sistema de archivos o archivos de usuario que será un problema de seguridad

2) No, explorador de archivos Enviar mismo bloque por bloque al servidor remoto

3) Véase el punto 1 :)

Fuente

2012-08-24 10:15:19 ruX

Para las personas que rechazaron esta respuesta: en este momento no hubo soporte para acceder al archivo del cliente – ruX

Respuesta

Cuestiones relacionadas