Un petit complement per a l'entrada de fitxers personalitzats de Bootstrap 4

Bloc

Un petit complement per a l'entrada de fitxers personalitzats de Bootstrap 4

Un petit complement per a l'entrada de fitxers personalitzats de Bootstrap 4

Un petit complement que fa que l'entrada de fitxers personalitzats de Bootstrap 4 sigui dinàmica sense dependències. bs-custom-file-input

Podeu utilitzar-lo a Reacciona i angular també perquè aquest connector està escrit amb el marc JavaScript més utilitzat: VanillaJS .

Característiques:

  • Funciona amb Bootstrap 4
  • Funciona sense dependències i jQuery
  • Mostra el nom del fitxer
  • Mostra els noms de fitxers per multiple entrada
  • Restableix l'entrada de fitxers personalitzats al seu estat inicial
  • Gestió del restabliment del formulari
  • Permet que seleccioneu personalitzats per a l'entrada i formulari
  • Permet arrossegar i deixar anar fitxers
  • Permet canviar la visualització per defecte amb un nen al element
  • Construït en UMD per utilitzar-lo a tot arreu
  • Petit, només 2 kb i menys si el gzip

Instal·la

Amb npm

npm install bs-custom-file-input --save

CDN

CDN Enllaç
jsDelivr https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.js
jsDelivr, minificat https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js

Com utilitzar-lo

Heu d'esperar a l'esdeveniment a punt per al document i trucar al init mètode per dinamitzar l'entrada de fitxers personalitzats. Exposem una variable global disponible a tot arreu: bsCustomFileInput

$(document).ready(function () { bsCustomFileInput.init() })

Utilitzeu-lo amb npm

import bsCustomFileInput from 'bs-custom-file-input'

Per obtenir més exemples consulteu aquest fitxer .

Aquesta biblioteca està preparada per a UMD perquè pugueu utilitzar-la a tot arreu.

Mètodes

init

Cerqueu l'entrada de fitxers personalitzats de Bootstrap i els farà dinàmics.

Paràmetres

  • inputSelector

    • valor per defecte: .custom-file input[type='file']
    • tipus: string

    Podeu passar un selector d'entrada personalitzat, però assegureu-vos de passar un selector d'entrada de fitxers

  • formSelector

    • valor per defecte: form
    • tipus: string

    Us permet passar un selector de formularis personalitzat, però assegureu-vos de passar un selector de formularis

destruir

Elimina aquest connector de l'entrada de fitxers personalitzats de Bootstrap i restaureu-los en el seu primer estat inicial

Compatibilitat

bsCustomFileInput és compatible amb:

  • IE10 +
  • Edge
  • Firefox
  • Chrome
  • Safari
  • Chrome Android
  • Safari iOS

Podeu trobar la nostra llista de navegadors BrowserStack aquí .

Dona'm suport

Si vols donar-me les gràcies, pots donar-me suport i convertir-me en el meu Cap

Gràcies

Gràcies a BrowserStack per proporcionar la infraestructura que ens permet provar en navegadors reals.

Detalls de la descàrrega:

Autor: Johann-S

Demostració en directe: https://bs-custom-file-input.netlify.com/

GitHub: https://github.com/Johann-S/bs-custom-file-input

#reactjs #javascript