Comprendere <input type = "file">

Sto cercando di capire come usare l'immagine selezionata in un sito web.Comprendere <input type = "file">

Diciamo che ho un semplice sito web che consente all'utente di selezionare un'immagine dal loro sistema utilizzando:

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

Poi in JavaScript che può fare questo per ottenere il file:

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

Domande:

1) Posso utilizzare userImage? Come disegnarlo su una tela, o devo prima caricarlo sul server web?

2) Se utilizzo l'immagine, il sito deve caricarlo ogni volta che lo uso o rimane in memoria?

3) Come faccio a sapere quando l'immagine è pronta per l'uso? (Per gli stessi motivi tutte le immagini devono essere precaricati alla partenza, prima disegnata su tela)

Grazie mille per il vostro aiuto :)

di follow-up

Grazie per le vostre risposte. Quindi sembra che sia possibile in html5 ma non ancora universalmente supportato.

fonte

2012-08-24 Jamie Fearon

In HTML4 questo non sarebbe possibile, ma in HTML5 dovresti essere in grado di accedere ai file locali usando lo W3 File API. Tuttavia, non sono sicuro di quando (e come) sarà supportato dai diversi browser. Nel mio locale Firefox 14.0.1, il seguente codice funziona e produce i dati binari del file selezionato:

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

La seguente pagina dipinge un'immagine locale su una tela:

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

Forse dovresti considera la lettura 2.

fonte

2012-08-24 10:29:35 tbl

Grazie per le vostre risposte. Quindi sembra che sia possibile in html5 ma non ancora universalmente supportato. –

+1 - buona soluzione e codice – techfoobar

È possibile trovare informazioni aggiornate sul supporto per l'API FileReader all'indirizzo http://caniuse.com/#feat=filereader – garethm

-3

1) Non è possibile aprire o modificare l'immagine perché gli script sul lato client vengono eseguiti nella sandbox del browser. Se gli script possono accedere al filesystem o file degli utenti, sarà un problema di sicurezza

2) No, il file del browser send stesso blocco per blocco al server remoto

3) Vedi articolo 1 :)

fonte

2012-08-24 10:15:19 ruX

Per le persone che non hanno risposto a questa risposta: in quel momento non vi era alcun supporto per l'accesso al file dal client – ruX

risposta

Problemi correlati