Carga de archivos de Jquery de Blueimp: No muestra la imagen de vista previa en miniatura

Utilicé Blueimp jQuery File Upload en la aplicación Rails. Cuando el usuario selecciona archivos, quiero mostrar una miniatura de la imagen y el nombre de la imagen antes de cargar los archivos al servidor.Carga de archivos de Jquery de Blueimp: No muestra la imagen de vista previa en miniatura

He estado recomendando el demo para personalizar este complemento. Puedo imprimir el nombre del archivo en la pantalla pero no puedo mostrar la miniatura.

Aquí está el código HTML generado

<!DOCTYPE html> 
<html> 
<head> 
    <title>Fileupload</title> 
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<link href="/assets/jquery.fileupload-ui.css?body=1" media="all" rel="stylesheet" type="text/css" /> 
<script src="/assets/jquery.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.ui.widget.js?body=1" type="text/javascript"></script> 
<script src="/assets/application.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.tmpl.js?body=1" type="text/javascript"></script> 
<script src="/assets/load-image.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/canvas-to-blob.min.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload-fp.js?body=1" type="text/javascript"></script> 
<script src="/assets/jquery.fileupload-ui.js?body=1" type="text/javascript"></script> 
<meta content="authenticity_token" name="csrf-param" /> 
<meta content="Akp8GLPQ+DlFYI1g3CUA71hk0vg3G84aVwcVRHTlRUY=" name="csrf-token" /> 
</head> 
<body> 
<div class="files"> 
    <form action="/users" class="upload" id="fileupload" method="post"> 
    <input id="user_photo" name="user[photo]" type="file" /> 
    <div>Upload files</div> 
    </form> 

    <table class="upload_files"></table> 
</div> 
<!-- The template to display files available for upload --> 
<script id="template-upload" type="text/x-jquery-tmpl"> 
    <tr class="template-upload fade"> 
    <td class="preview"><span class="fade"></span></td> 
    <td class="name"><span>${name}</span></td> 
    </tr> 
</script> 
<script type="text/javascript" charset="utf-8"> 
    $(function() { 
     $('#fileupload').fileupload({ 
      add: function (e, data) { 
       console.log('add'); 
       $.each(data.files, function (index, file) { 
        console.log('Added file: ' + file.name); 
        //alert($('#tmpl-demo').tmpl(data)); 
        $('#template-upload').tmpl(data.files).appendTo('.upload_files'); 
       }); 
       var jqXHR = data.submit() 
         .success(function (result, textStatus, jqXHR) {/* ... */}) 
         .error(function (jqXHR, textStatus, errorThrown) {/* ... */}) 
         .complete(function (result, textStatus, jqXHR) { 
          console.log("complete"); 
          //$('.upload_files').append('<tr><td>'+ result +'</td></tr>'); 
         }); 
      }, 
      progress: function (e, data) { 
       console.log('progress'); 
      }, 
      start: function (e) { 
       console.log('start'); 
      }, 
      done: function (e) { 
       console.log('done'); 
      } 
     }).bind('fileuploadadd', function (e, data) { 
        console.log('fileuploadadd'); 
       }).bind('fileuploadprogress', function (e, data) { 
        console.log('fileuploadprogress'); 
       }).bind('fileuploadstart', function (e) { 
        console.log('fileuploadstart'); 
       }).bind('fileuploaddone', function (e) { 
        console.log('fileuploaddone'); 
       }); 


    }); 
</script> 
</body> 
</html>

comparo el código HTML generado después de seleccionar los archivos. La única diferencia es que la aplicación de demostración tiene el elemento <canvas height="72" width="80"></canvas> dentro de <td class="preview"><span class="fade"></span></td> que falta en mi aplicación.

Parece un problema de configuración. ¿Alguien podría ayudarme a configurarlo correctamente para mostrar la miniatura tan pronto como el usuario seleccione imágenes del disco?

Fuente

2012-06-10 Amit Patel

Esas vistas previas no son parte de la versión básica. Ellos son parte de la "plug-in adicional que proporciona una interfaz de usuario completa (jquery.fileupload-ui.js)."

Así que hay que incluir esos archivos js, y es probable que tenga algunas envolturas HTML.

Consulte el código fuente HTML de la demostración, porque está incluido en esa demostración.

Fuente

2012-06-13 14:19:58

, gracias. Utilicé jquery.fileupload-ui.js y modifiqué un poco para que coincida con mi requisito. Gracias. Compartiría la aplicación de demostración en github una vez que esté en buen estado. –

lugar esta función de devolución de llamada dentro de su complemento (e, datos), ajustando por sus propios elementos HTML en consecuencia:

$('body').append('<img src="' + URL.createObjectURL(data.files[0]) + '"/>');

La función URL.createObjectURL se documenta here.

Fuente

2013-08-17 02:58:27 Dwayne

Esto funcionó sin necesidad de incluir ningún archivo adicional, gracias – evilcelery

Muchas gracias, esto es lo que estaba buscando. Todavía no entiendo por qué modificar el disparador de agregar elimina la funcionalidad de vista previa. –

gracias por esta buena solución. ¿Cuáles son los requisitos del navegador para esta opción? –

_renderPreviews función de edición en el archivo jquery.fileupload-ui.js

_renderPreviews: function (data) {   
     data.context.find('.preview').each(function (index, elm) {    
      $(elm).append(data.files[index].preview); 
      $(elm).append('<img width="90" src="' + URL.createObjectURL(data.files[0]) + '"/>'); 
     }); 
    },

Fuente

2016-07-14 02:47:52

Carga de archivos de Jquery de Blueimp: No muestra la imagen de vista previa en miniatura

Respuesta

Cuestiones relacionadas