Rieles + javascript - vista previa de la imagen antes de cargar

Quiero mostrar una vista previa de la imagen antes de cargarla, para eso estoy usando el código que se proporciona a continuación.Rieles + javascript - vista previa de la imagen antes de cargar

Funciona con Firefox, pero no funciona con IE8

<%= image_tag @image, :id=>"preview-photo" %> 
<%= file_field 'image','photo', :onchange => "preview(this);" %> 

function preview(this) { 
    document.getElementById("preview-photo").src = this.value; 
    return; 
}

¿Hay alguna solución para previsualizar la imagen en IE8 y otros navegadores?

Fuente

2011-04-08 lamrin

Se puede publicar el código html, que obtendrá el navegador? – reporter

Uso https://github.com/blueimp/jQuery-File-Upload para subir archivos.

En la especificación de este plugin de jQuery, se puede leer:

Vista previa de imágenes se pueden cargar y se muestran los archivos de imagen locales en los navegadores que soportan las interfaces de URL o FileReader.

IE8 no es compatible con HTML5 por lo que no es compatible con FileReader. Deberías usar flash o amigos para lograr eso.

Firefox es compatible con HTML5 ...

Fuente

2011-04-09 15:02:01 apneadiving

que había hecho una solución de JS puro con reserva para los usuarios de IE: http://mootools.standupweb.net/dragndrop.php

Fuente

2011-05-12 15:54:15 standup75

This solución funciona como un encanto y tiene una carga condicional para Internet Explorer por lo que debería funcionar para usted.

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>

Fuente

2013-04-22 22:52:00 Puce

No, no funciona en IE8 IE9 –

Hola puce, hiciste bien al incluir el enlace original. Ha excluido esta línea de código '' del enlace original, y el código está funcionando solo si esta linea existe ¿Puedes ayudarme a entender por qué esta única línea es tan importante? – learner

¡Claro! Lo excluí porque es la carga de jQuery. jQuery es una biblioteca de JavaScript que envuelve algunas funciones y (IMO) ayuda a hacer su código más limpio (solicite a un experto una explicación más técnica). El hecho de tener '$ ('# img_prev')' implica que jQuery está presente. El problema es que, en la fuente, está cargando una versión muy antigua de jQuery, el codificador debe intentar cargar la versión más reciente de jQuery siempre que sea posible. De todos modos, pondré un comentario que lo aclare :) – Puce

En ERB: Toma de entrada, y darle una nombre de clase e id dinámico, y también crea una etiqueta de imagen con id de dyanamic donde mostrarás la imagen de vista previa.

<%= f.file_field :photo, :class => 'photo_upload', :id => "image_#{image.id}" %> 
<%= image_tag("preview.png", :id => "image_#{image.id}_medium") %>

en javascript:

function readURL(input) { 
    if (input.files && input.files[0]) { 
     var reader = new FileReader();    
     reader.onload = function (e) { 
      $(document.getElementById(input.id + "_medium")).attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$(".photo_upload").change(function(){ 
    readURL(this); 
});

Fuente

2016-04-06 06:30:35 Nitesh

Rieles + javascript - vista previa de la imagen antes de cargar

Respuesta

Cuestiones relacionadas