è possibile visualizzare l'anteprima delle immagini locali prima di caricarle tramite un modulo?

Question

Per essere più specifici, voglio usare un modulo con uno o più campi di input file usati per le immagini. Quando quei campi sono cambiati, mi piacerebbe mostrare un'anteprima dell'immagine associata, prima di inviare i dati al server.

Ho provato un numero di approcci javascript, ma mi imbatto sempre in errori di sicurezza. Non mi dispiacerebbe usare java o flash, a patto che la soluzione si degradasse con garbo per quegli utenti che non li avevano. (Non otterrebbero anteprime e non otterrebbero neanche una fastidiosa "installazione di questa cosa")

Qualcuno ha fatto questo in un modo semplice e riutilizzabile?

P.S. So che c'è una sandbox, ma la sandbox deve essere in una stanza buia e chiusa a chiave con tutte le finestre oscurate?

Answer 1

Here's a jQuery + PHP script per caricare un'immagine in anteprima.

Answer 2

JavaScript non ha accesso al file system locale per motivi di sicurezza, periodo.

Answer 3

Il primo passo è individuare il percorso dell'immagine. JavaScript è autorizzato a interrogare il controllo di upload per un nome file/percorso, ma (per ragioni di sicurezza) vari browser mostrano cose diverse al motore JS di quanto non visualizzino all'utente - tendono a mantenere intatto il nome del file in modo da poter almeno convalidare la sua estensione, ma potresti ottenere c:\fake_path\ o qualcosa simile offuscato anteposto al nome del file. Provare questo su vari browser ti darà un'idea di ciò che viene restituito come un vero percorso, e cosa viene simulato e dove.

Il secondo passaggio è la visualizzazione dell'immagine. È possibile visualizzare le immagini locali se si conoscono i loro percorsi, tramite i tag img con gli URL di origine file://, se il browser dell'utente consente lo schema file://. (Firefox non lo fa, per impostazione predefinita.) Quindi se riesci a indurre l'utente a dirti quale sia il percorso completo dell'immagine, puoi almeno provare a caricarlo.

Answer 4

Ho sempre visto solo applet Java che eseguono questa operazione, ad esempio l'applet di caricamento delle immagini su Facebook. L'aspetto negativo dell'approccio Java è che all'utente verrà richiesto di affidarsi all'applet prima dell'esecuzione, che è una sorta di fastidio, ma ciò consente all'applet di presentare un browser di file con anteprime di immagini o fare cose più interessanti come l'utente per caricare un'intera directory.

Answer 5

Non c'è bisogno di cose fantasiose. Tutto ciò che serve è la funzione createObjectURL, che crea un URL che può essere utilizzato come immagine src e può provenire direttamente da un file locale.

Supponiamo di aver selezionato un paio di immagini dal computer dell'utente utilizzando un elemento di input file (<input type="file" />). Ecco come si creerebbe le anteprime per i file di immagine per esso:

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

Si può provare questo approccio, anche se sembra che non funziona su IE.

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

E 'semplice e veloce per il codice.

ho messo il codice qui solo nel caso in cui la fonte muore:

Script:

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

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