2012-07-14 9 views

risposta

14

Se avete solo bisogno anteprima dell'immagine in forma prima di caricare, voi (come me), vedrete che JQuery Carica plugin è semplicemente troppo complessa e non così facile da funzionare correttamente (sono stato in grado di vedere l'anteprima , ma poi non ho potuto caricare la foto).

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

Questo non funziona in IE – Rodrigo

+0

Penso che stia usando alcune funzionalità HTML5, probabilmente è la causa. – Puce

+0

IE non hanno classe FileReader – Rodrigo

4

È possibile utilizzare il plugin jQuery File Upload che si tratta di una soluzione completa, ma se avete bisogno di qualcosa di meno robusta, si può anche provare a utilizzare FileReader direttamente, come this, in modo da poter personalizzare la funzionalità per tutto ciò che serve.

1

Secondo i documenti image_cache sta mostrando ciò che si sta caricando.

<%= f.hidden_field :image_cache %> 
+2

quale documento? qualche riferimento disponibile? – Rubyrider

+0

Se si fornisce un riferimento al documento, sarà meglio. – learner

+0

https://github.com/carrierwaveuploader/carrierwave#making-uploads-work-across-form-reisplay –

Problemi correlati