Como selecionar vários arquivos usando a tag de entrada HTML?
Usar a tag de entrada para fazer upload de vários arquivos tornou-se possível após o lançamento do HTML 5. Uma vez que muitos de nós, trabalhamos com HTML e ainda usam tags como a tag <input> para receber a entrada do usuário e a tag <form> para usar formulários em nosso site, é necessário saber implementar o recurso de múltiplos arquivos usando HTML. Podemos atribuir o atributo 'múltiplo' com o valor de múltiplo como abaixo:
Sintaxe:
<input type="file" id="files" name="files" multiple="multiple">
OU
<input type="file" id="files" name="files" multiple>
Observação: podemos usar apenas vários como propriedade. Bem, é muito simples. HTML 5 tem uma propriedade para tag de entrada que é 'múltipla'.
O exemplo abaixo ilustra a abordagem acima:
Exemplo: Usando esta propriedade, você pode inserir vários arquivos. Para selecionar arquivos, você deve usar CTRL ou SHIFT e selecionar o número de arquivos a serem carregados.
<!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>
Saída:
Mas se você estiver usando HTML 4 ou versões anteriores do HTML, você precisa usar várias tags de entrada ou pode usar plug-ins como Flash ou Silverlight para inserir vários arquivos de entrada. Você também pode usar JavaScript para fazer upload de vários arquivos. No entanto, o uso de HTML 4 e versões inferiores não são encorajados como com HTML 5, muitos novos recursos foram introduzidos, bem como a dependência de usar plug-ins de terceiros para várias operações é reduzida significativamente. Com o uso de várias propriedades da tag de entrada, você pode fazer upload de vários arquivos.
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva