¿Cómo seleccionar varios archivos usando la etiqueta de entrada HTML?

El uso de la etiqueta de entrada para cargar varios archivos se hizo posible después del lanzamiento de HTML 5. Dado que muchos de nosotros trabajamos en HTML y todavía usamos etiquetas como la etiqueta <input> para recibir información del usuario y la etiqueta <form> para usar formularios . en nuestro sitio web, es necesario saber cómo implementar la función de archivos múltiples usando HTML. Podemos asignar el atributo ‘múltiple’ con el valor de múltiple como se muestra a continuación: 
 

Sintaxis:  

<input type="file" id="files" name="files" multiple="multiple">


 

<input type="file" id="files" name="files" multiple>

Nota: Podemos usar solo múltiplo como una propiedad. Bueno, es muy simple. HTML 5 tiene una propiedad para la etiqueta de entrada que es ‘múltiple’. 
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo: Usando esta propiedad, puede ingresar varios archivos. Para seleccionar archivos, debe usar CTRL o SHIFT y seleccionar la cantidad de archivos que desea cargar. 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        Select multiple files using HTML Input tag
    </title>
    <style>
        h1 {
            color: green;
        }
         
        .container {
            text-align: center;
            width: 850px;
            margin: 35px;
        }
         
        .property {
            width: 400px ;
            float: left;
            border: 2px solid black;
            padding: 10px;
        }
        .attribute {
            width: 400px ;
            float: right;
            border: 2px solid black;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <h1>GeeksforGeeks</h1>
        <b>A Computer Science Portal for Geeks</b>
        <br><br>
        <div class="property">
             
<p>
                Input Multiple Files using Input Tag,
                <b>'multiple property'</b>
            </p>
 
            <form action="/action_page_inputtags_multiplefiles.php">
                <label for="files">Select Multiple files:</label>
                <input type="file" id="files" name="files" multiple>
            </form>
        </div>
        <div class="attribute">
             
<p>
                Input Multiple Files using Input Tag,
                <b>'multiple attribute'</b>
            </p>
 
            <form action="/action_page_inputtags_multiplefiles.php">
                <label for="files">Select Multiple files:</label>
                <input type="file" id="files" name="files"
                                              multiple="multiple">
            </form>
        </div>
</body>
 
</html>

Producción: 
 

Pero si está utilizando HTML 4 o versiones anteriores de HTML, necesita usar múltiples etiquetas de entrada o puede usar complementos como Flash o Silverlight para insertar múltiples archivos de entrada. También puede usar JavaScript para cargar varios archivos. Sin embargo, no se recomienda el uso de HTML 4 y versiones anteriores, ya que con HTML 5 se han introducido muchas características nuevas, así como también se reduce significativamente la dependencia del uso de complementos de terceros para diversas operaciones. Mediante el uso de varias propiedades de la etiqueta de entrada, puede cargar varios archivos.

Publicación traducida automáticamente

Artículo escrito por SagarBapodara 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 *