He estado utilizando rieles durante los últimos días y quería saber cuál es la mejor manera de mostrar vistas previas de imágenes antes de cargarlas en rieles & carrierwave.La mejor manera de mostrar vistas previas de imágenes antes de cargar en rieles y carrierwave
Encontré algunas opciones como usar plupload o subir archivos jquery o usar uploadify.
Si sólo necesita previsualización de la imagen en un formulario antes de cargar, usted (como yo) se verá que jQuery Subir plugin es demasiado complejo y no es tan fácil para funcionar correctamente (que era capaz de ver la vista previa , pero luego no pude subir la foto).
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
Es muy sencillo y rápido de código.
pongo el código aquí por si acaso la fuente muere:
Guión:
<!-- 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>
En el código 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>
Usted puede utilizar el plugin jQuery File Upload el cual es una solución completa, pero si necesita algo menos robusto, también puede intentar usar FileReader directamente, como this, para que pueda personalizar la funcionalidad para lo que necesite.
De acuerdo con los documentos image_cache está mostrando lo que está cargando.
<%= f.hidden_field :image_cache %>
Esto no funciona en IE – Rodrigo
Creo que está usando algunas funcionalidades HTML5, esa es probablemente la causa. – Puce
IE no tiene la clase FileReader – Rodrigo