Uploader de archivos con vista previa-File-upload-With-Preview. js

Vista prévia

Descripción

La biblioteca JavaScript File-upload-With-Preview. js mejora la entrada de archivo por defecto con soporte para la previsualización de archivos antes de subirlos. Soporta imágenes, videos, PDFs y más.

Funcionamiento

Instálelo a través de gestores de paquetes.

# Yarn
$ yarn add file-upload-with-preview

# NPM
$ npm install file-upload-with-preview --save

O descargar directamente el zip e incluir los siguientes archivos en la página HTML.

<script src="/path/to/file-upload-with-preview.js"></script>
<link rel="stylesheet" href="/path/to/file-upload-with-preview.css">

La estructura HTML para la entrada de archivo & área de vista previa del archivo.

<div class="custom-file-container" data-upload-id="myUploader">


<label>Upload File <a href="javascript:void(0)" class="custom-file-container__image-clear" title="Clear Image">x</a></label>


<label class="custom-file-container__custom-file" >



<input type="hidden" name="MAX_FILE_SIZE" value="10485760" />



<input type="file" class="custom-file-container__custom-file__custom-file-input" accept="*">



<span class="custom-file-container__custom-file__custom-file-control"></span>

</label>

<div class="custom-file-container__image-preview"></div>

</div>

Inicializar la biblioteca y listo.

var myUpload = new FileUploadWithPreview('myUploader')

Habilite un botón personalizado para obtener la información del archivo.

var myUploadInfoButton = document.querySelector('.upload-info-button');
myUploadInfoButton.addEventListener('click', function(){

console.log('Upload:', myUpload, myUpload.cachedFile);
})

Registro de cambios

v3.3.0 (03/25/2019)

• Añadir imagen a las opciones

v3.2.7 (03/15/2019)

• elimina @babel/polyfill de las dependencias, agrega polirellenos específicos para los exploradores más antiguos

v3.2.0 (03/14/2019)

• Se mueve de Gulp a WebPack.

v3.1.3 (03/08/2019)

• Se realizaron actualizaciones de accesibilidad.
• Se agregó un objeto de texto a las opciones para que la copia de entrada se pueda cambiar.

v3.0.1 (10/03/2018)

• Se ha quitado la opción de no mostrar una cuadrícula de archivos al establecer varios en la entrada. El desorden lógico no valía la pena teniendo en cuenta que realmente no necesitamos la opción ahora que tenemos una vista de cuadrícula para varias imágenes.
• Flujo lógico limpiado.
• Se agregaron botones para eliminar archivos indivudos en la vista de cuadrícula. También incluye la opción de desactivar esta función.
• Se ha añadido un evento de eliminación que se desencadena cuando se elimina un archivo.
• Actualizado el archivo Léame en consecuencia con estos cambios.

v3.0.0 (09/24/2018)

• Reescritura del código de la librería. Hizo el manejo de múltiples imágenes un poco más claras. Trató de limpiar la lógica y establecer las propiedades de una sola vez cuando sea necesario. Debería ser un poco más claro ahora.
• Mostrar la cuadrícula de imágenes en el caso de varios es ahora la configuración predeterminada. Para detenerlo, pase {showMultiple: false} al inicializar la clase.
• Todas las opciones adicionales ahora se configuran para pasarse en una sola Opciones objeto durante la inicialización. Esto será bueno para cualquier adición adicional.
• Reestructurado cómo el Imageseligio evento se realiza para que sea un poco más fácil de usar – ver la documentación actualizada sobre cómo utilizar ese evento.
• Custom-File-container__image-preview__active se cambió a Custom-File-container__image-Preview--Active para estar alineado con el estilo BEM.
• Se agregó desbordamiento al panel de varias imágenes, por lo que cuando hay una tonelada de fotos, no solo sigue creciendo en altura.

v2.1.2 (09/22/2018)

• soporte para. gifs en previsualizaciones individuales y múltiples

v2.1.0 (07/28/2018)

• corrige el error en la carga de un solo archivo

v2.0.3 (06/23/2018)

• Agregue un evento Imageseligio

v2.0.2 (06/23/2018)

• Agregue un método externo para desencadenar el explorador de imágenes mediante el script