Permitir la carga de archivos en su sitio web se vuelve necesario cuando desea obtener los datos de los usuarios en forma de documento, imagen o archivo. HTML le permite agregar la funcionalidad de carga de archivos a su sitio web agregando un botón de carga de archivos a su página web con la ayuda de la etiqueta <input> .
El <input type=”file”> define un campo de selección de archivos y un botón “ Examinar ” para cargar archivos.
Sintaxis:
<input type="file" id="myfile" name="myfile" />
Ejemplo 1: El código con la funcionalidad de carga de archivos se puede ver a continuación. El resultado muestra un botón de carga de archivos que dice «Elegir archivo». Con la ayuda de este botón, podemos subir los archivos a un sitio web en particular.
HTML
<!DOCTYPE html> <html> <body> <h1>Show File-select Fields</h1> <h3> Show a file-select field which allows only one file to be chosen: </h3> <form action="/action_page.php" enctype="multipart/form-data"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile" /> <br /><br /> <input type="submit" /> </form> </body> </html>
Producción:
Subir archivo
Ejemplo 2: para definir un campo de selección de archivos que permita seleccionar varios archivos, agregue el atributo ‘ múltiple ‘ de la siguiente manera.
Sintaxis:
<input type="file" id="myfile" name="myfile" multiple>
De esta forma, podemos crear y subir un botón de archivo a nuestro sitio web. Para asegurarse de que los datos del archivo se lean desde el archivo para enviarlos al servidor, asegúrese de usar el atributo “enctype=”multipart/form-data” dentro de la etiqueta del formulario. Si no se utiliza este atributo, no se leerán los datos del archivo, sino solo el nombre del archivo.
HTML
<!DOCTYPE html> <html> <body> <h1>Show File-select Fields</h1> <h3> Show a file-select field which allows multiple files to be chosen: </h3> <form action="/action_page.php" enctype="multipart/form-data"> <label for="myfile">Select a file:</label> <input type="file" id="myfile" name="myfile" multiple="multiple" /> <br /><br /> <input type="submit" /> </form> </body> </html>
Producción:
