Validación del tamaño del archivo al cargar usando JavaScript / jQuery

Validación del tamaño del archivo al cargar usando JavaScript / jQuery

La validación de datos es una parte esencial de cualquier aplicación web, ya que ayuda a garantizar que los datos que se cargan se ajustan a ciertos requisitos impuestos por los desarrolladores. Los datos se pueden validar tanto en el lado del servidor como del cliente, pero la validación del lado del cliente a menudo ahorra el tiempo de los usuarios y resulta más agradable y más suave experiencia de usuario. La validación de datos del lado del cliente se puede hacer fácilmente y consume mucho menos tiempo.

En esta guía de cómo hacer, pasaremos por el proceso de crear un formulario usando HTML, JavaScript/jQuery que valida el archivo del tamaño a medida que se está cargando. El beneficio de esta validación es que podemos restringir a los usuarios a cargar solo un cierto tamaño de archivos y asegurarnos de que sigan estrictamente nuestros requisitos. Si el archivo es del tamaño incorrecto, podemos solicitar un mensaje al usuario sin cargar el archivo al servidor que ahorra un tiempo precioso.

Crear página web

Primero, crearemos una página web HTML simple:




<br>Validación del tamaño del archivo al cargar usando JavaScript / jQuery<br>


Cargar un archivo










Comprender el código:

En el cuerpo de la página web, simplemente hemos usado un

, ,
y un etiqueta. El La etiqueta se usa para que el usuario pueda elegir un archivo y luego cargarlo usando el botón que se muestra usando el etiqueta.

El etiqueta llama al sizeValidation () Función en el evento de clic que luego determina el tamaño del archivo e imprime una alerta apropiada dependiendo del tamaño del archivo.

Definir la función JavaScript sizeValidation ()

Ahora escribamos el código JavaScript que define el sizeValidation () función.


Comprender el código:

Dentro del cuerpo del sizeValidation () función primero obtenemos la etiqueta y luego usamos el archivo var = inputelement.archivos; línea para que podamos obtener acceso al archivo que se está cargando. Luego verificamos si un archivo ha sido cargado, si no, solicitaremos un mensaje de error y saldremos de la función devolviendo FALSO.


Luego usamos algunas matemáticas para determinar el tamaño del archivo. Si el archivo es de tamaño apropiado i.mi., 5 MB (en este caso), se carga.


De lo contrario, se muestra una ventana emergente que contiene un mensaje de error.

Conclusión

Aunque la validación del lado del cliente es mucho más eficiente, todavía no es un sustituto de la validación del lado del servidor y se puede evitar en la mayoría de los casos. Siempre es una mejor práctica implementar la validación del servidor y el lado del cliente para que pueda garantizar tanto la eficiencia como la precisión de su aplicación.