validar tutorial plugin plantillas personalizar form español enviar customizer columnas color cf7 campos cambiar boton html validation file input

html - tutorial - plantillas contact form 7



¿Cómo obtener el elemento de entrada HTML del tipo "archivo" para aceptar solo archivos pdf? (7)

Los carteles anteriores cometieron un pequeño error. El atributo de aceptación es solo un filtro de visualización. No validará su entrada antes de enviar.

Este atributo hace que el diálogo del archivo muestre solo el tipo de mime requerido. Pero el usuario puede anular ese filtro. Él puede elegir . y ver todos los archivos en el directorio actual. Al hacerlo, puede seleccionar cualquier archivo con cualquier extensión y enviar el formulario.

Entonces, para responder al cartel original, NO. No puede restringir el archivo de entrada a una extensión particular usando HTML.

Pero puede usar javascript para probar el nombre de archivo que se ha elegido, justo antes de enviarlo. Simplemente inserte un atributo onclick en su botón de envío y llame al código que probará el valor del archivo de entrada. Si la extensión está prohibida, deberá devolver false para invalidar el formulario. Incluso puede utilizar un validador personalizado jQuery y así sucesivamente, para validar el formulario.

Finalmente, también tendrás que probar la extensión en el lado del servidor. Mismo problema sobre el tamaño máximo de archivo permitido.

¿hay alguna manera de que el archivo del elemento html

<input name="file1" type="file" style="width:300px">

Solo acepta archivos PDF y cuando navegamos solo mostramos archivos PDF ...

Gracias

No con el control de archivos HTML, no. Sin embargo, un cargador de archivos flash puede hacer eso por ti. Puede usar algún código del lado del cliente para verificar la extensión de PDF después de que seleccionen, pero no puede controlar directamente lo que pueden seleccionar.

No hay otra forma de hacerlo que no sea validar la extensión de archivo con JavaScript cuando el selector de archivos rellena la ruta de entrada. Para implementar algo más sofisticado, debe escribir su propio componente para el navegador que desee (activeX o XUL)

Hay un atributo de "aceptar" en HTML4.01 pero no conozco ningún navegador que lo admita, por ejemplo, accept="image/gif,image/jpeg - así que es una especificación nítida pero poco práctica

Para obtener el elemento de formulario de entrada de file HTML para que solo acepte archivos PDF, puede utilizar el atributo accept en navegadores modernos como Firefox 9+, Chrome 16+, Opera 11+ e IE10 + como:

<input name="file1" type="file" accept="application/pdf">

Puedes unir varios tipos de mime con una coma.

La siguiente cadena aceptará archivos JPG, PNG, GIF, PDF y EPS:

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

En los navegadores más antiguos, el cuadro de diálogo del archivo nativo del sistema operativo no se puede restringir: tendría que usar Flash o un applet de Java o algo así para manejar la transferencia de archivos.

Y, por supuesto, no hace falta decir que esto no hace nada para verificar la validez del tipo de archivo . Lo harás en el lado del servidor una vez que el archivo se haya cargado.

Una pequeña actualización : con javascript y la API FileReader , podría hacer más validación del lado del cliente antes de cargar archivos enormes en su servidor y revisarlos nuevamente.

Puede ser útil evitar que el usuario distraído realice una mala elección involuntaria, pero en cualquier caso, debe realizar la comprobación en el lado del servidor de todos modos.
La mejor manera es ser claro en la página de carga. Después de eso, si el usuario carga estúpidamente un archivo grande con el tipo incorrecto, es su pérdida de tiempo, ¿no?