Convalida della dimensione del file durante il caricamento utilizzando JavaScript / JQuery
La convalida dei dati è una parte essenziale di qualsiasi applicazione Web in quanto aiuta a garantire che i dati caricati soddisfino alcuni requisiti imposti dagli sviluppatori. I dati possono essere validati sia sul lato server che sul lato client, ma la convalida sul lato client spesso risparmia il tempo degli utenti e si rivela un'esperienza utente più bella e più fluida. La convalida dei dati sul lato client può essere eseguita facilmente e consuma molto meno tempo.
In questa guida How-to-Do passeremo attraverso il processo di creazione di un modulo usando HTML, JavaScript/JQuery che convalida il file della dimensione mentre viene caricato. Il vantaggio di questa convalida è che possiamo limitare gli utenti a caricare solo una certa dimensione di file e assicurarci che seguano rigorosamente i nostri requisiti. Se il file ha una dimensione sbagliata, possiamo chiedere un messaggio all'utente senza caricare il file sul server che risparmia tempo prezioso.
Crea una pagina web
Innanzitutto, creeremo una semplice pagina web HTML:
<br>Convalida della dimensione del file durante il caricamento utilizzando JavaScript / JQuery<br> Caricare un file
Comprensione del codice:
Nel corpo della pagina web, abbiamo semplicemente usato a , ,
e a etichetta. IL il tag viene utilizzato in modo che l'utente possa scegliere un file e quindi caricarlo utilizzando il pulsante visualizzato utilizzando il etichetta.
IL tag chiama il sizeValidation () Funzione sull'evento Fare clic che determina quindi la dimensione del file e stampa un avviso appropriato a seconda delle dimensioni del file.
Definire la funzione JavaScript sizevalidation ()
Ora scriviamo il codice JavaScript che definisce il sizeValidation () funzione.
Comprensione del codice:
All'interno del corpo del sizeValidation () funzione otteniamo prima il tag e quindi utilizziamo il var file = inputElement.File; riga in modo da poter accedere al file da caricare. Quindi controlliamo se un file è stato caricato, in caso contrario, richiederemo un messaggio di errore e usciranno dalla funzione restituendo False.
Usiamo quindi alcune matematiche per determinare le dimensioni del file. Se il file è di dimensioni appropriate i.e., 5 MB (in questo caso), viene caricato.
Altrimenti, viene visualizzato un pop-up contenente un messaggio di errore.
Conclusione
Anche se la convalida sul lato client è molto più efficiente, non è ancora un sostituto per la convalida sul lato server e può essere aggirato nella maggior parte dei casi. È sempre una migliore pratica implementare sia la convalida sul lato server che sul client in modo da poter garantire sia l'efficienza che l'accuratezza dell'applicazione.