En este artículo aprenderemos a especificar los tipos de archivos que acepta el servidor en HTML5. El atributo de aceptación <input> se utiliza para especificar el tipo de archivo que acepta el servidor. Este atributo solo se puede usar con el elemento <input type=”file”>. Este atributo no se usa para la herramienta de validación porque las cargas de archivos deben validarse en el servidor.
Agregaremos cada archivo específico uno por uno.
- Primero, comenzaremos usando el archivo de MSOffice. Usaremos el atributo ‘aceptar’ para especificar tipos de archivos.
<input type="File" name="" accept=".doc, .docx">
-
Para especificar el archivo de video, usaremos el siguiente código.
<input type="File" name="" accept="video/*">
Nota: El * es el comodín y significa que acepta todos los formatos de video.
-
Para especificar los archivos de texto o PDF, usamos el siguiente código.
<input type="File" name="" accept=".pdf, .txt">
-
Para especificar el archivo de audio, usaremos el siguiente código.
<input type="File" name="" accept="audio/*">
-
Para especificar el archivo de imagen, usaremos el siguiente código.
<input type="File" name="" accept="image/*">
Para especificar el archivo png o jpeg específico, usaremos el siguiente código.
<input type="File" name="" accept=".png, .jpg, .jpeg">
Podemos combinar varios tipos de archivos. Si queremos todos los formatos de Audio y Video y formato png para Imágenes y Pdfs.
<input type="File" name=""
accept="video/*, audio/*, .png, .pdf">
código final:
HTML
<!DOCTYPE html> <html> <body> <form> <label>Select a MSWord file:</label> <input type="File" name="" accept=".doc, .docx"><br><br> <label>Select an Video file:</label> <input type="File" name="" accept="video/*"><br><br> <label>Select a Pdf or Text file:</label> <input type="File" name="" accept=".pdf, .txt"><br><br> <label>Select an Audio file:</label> <input type="File" name="" accept="audio/*"><br><br> <label>Select an Image file:</label> <input type="File" name="" accept="image/*"><br><br> <label>Select a Png or Jpeg file:</label> <input type="File" name="" accept=".png, .jpg, .jpeg"><br><br> <label>Select a Multiple file Types:</label> <input type="File" name="" accept="video/*, audio/*, .png, .pdf"> <br><br> <input type="Submit" name=""> </form> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AyanChawla y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA