¿Cómo subir archivos usando HTML al sitio web?

Todo archivo que deba ser cargado en el sitio web, requiere el formulario básico que facilita la carga. Esta función es fundamental cuando estamos rellenando el formulario en una web concreta. Esta carga de archivos puede admitir una variedad de formatos de archivo junto con varios tipos de archivos. La función de carga de archivos es una de las partes esenciales del formulario en el sitio web. En este artículo, aprenderemos a crear la función de carga de archivos en el sitio web utilizando HTML. Usaremos el concepto de etiqueta HTML <input> que permitirá al usuario subir archivos a un sitio web.

Etiqueta <input>: se utiliza para especificar un campo de entrada donde el usuario puede ingresar los datos requeridos. La etiqueta de entrada se usa dentro del elemento <form> para declarar controles de entrada que permiten a los usuarios ingresar datos. Un campo de entrada puede ser de varios tipos según el tipo de atributo. La etiqueta de entrada es un elemento vacío que solo contiene atributos. Aquí, hemos definido un atributo de tipo cuyo valor se establece como «archivo»

Sintaxis:

<input type = "file"... />

Esta sintaxis especifica el campo de selección de archivos que permite que la función elija uno o más archivos del almacenamiento de su dispositivo y luego los cargue en un servidor mediante el botón de envío de formularios.

Ejemplo: Este ejemplo ilustra el uso de la etiqueta <input> al especificar el atributo de tipo como un archivo.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>How to upload files using HTML to website?</title>
</head>
  
<body>
    <center>
        <h1>Welcome to GFG</h1>
        <h2>How to upload files using HTML to website?</h2>
        <input type="file" 
               id="file1" 
               name="upload">
    </center>
</body>
</html>

Salida: en la salida, puede ver que cuando se elige el archivo y luego se carga, su nombre también se muestra justo al lado del botón.

Publicación traducida automáticamente

Artículo escrito por kunalmali y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *