1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
title: 'HTML el atributo: accept'
slug: Web/HTML/Attributes/accept
tags:
- Accept
- Archivo
- Entrada
- Input
- Referencia
- atributo
translation_of: Web/HTML/Attributes/accept
original_slug: Web/HTML/Atributos/accept
---
<p class="summary"><span class="seoSummary">El atributo <strong><code>accept</code></strong> toma como valor una lista separada por comas de uno o más tipos de archivos, o {{anch("Especificadores de tipo de archivo únicos","especificadores de tipo de archivo únicos")}}, que describen qué tipos de archivo permitir. </span>La propiedad «<em>accept</em>» es un atributo del tipo {{HTMLElement("input/file", "file")}} {{HTMLElement("input")}}. Se admitía en el elemento {{HTMLElement("form")}}, pero se eliminó a favor de {{HTMLElement("input/file", "file")}} en HTML5.</p>
<p>Debido a que un determinado tipo de archivo se puede identificar de más de una manera, es útil proporcionar un conjunto completo de especificadores de tipo cuando necesiten archivos de un tipo específico, o usar el comodín para indicar que un tipo de cualquier formato es aceptable.</p>
<p>Por ejemplo, hay varias formas de identificar los archivos de Microsoft Word, por lo que un sitio que acepta archivos de Word puede usar un <code><input></code> como este:</p>
<pre class="brush: html notranslate"><input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre>
<p>Mientras que si aceptas un archivo multimedia, es posible que desees incluir cualquier formato de ese tipo de medio:</p>
<pre class="brush: html notranslate"><input type="file" id="soundFile" accept="audio/*">
<input type="file" id="videoFile" accept="video/*">
<input type="file" id="imageFile" accept="image/*"></pre>
<p>El atributo <code>accept</code> no valida los tipos de archivos seleccionados; simplemente proporciona sugerencias para los navegadores para guiar a los usuarios hacia la selección de los tipos de archivo correctos. Todavía es posible (en la mayoría de los casos) que los usuarios cambien una opción en el selector de archivos que hace posible anular esto y seleccionar cualquier archivo que deseen, y luego elegir tipos de archivo incorrectos.</p>
<p>Debido a esto, te debes asegurar de que el requisito esperado esté validado en el lado del servidor.</p>
<h2 id="Ejemplos">Ejemplos</h2>
<p>Cuando se configura en un tipo de entrada de archivo, el selector de archivos nativo que se abre solo debe permitir seleccionar archivos del tipo de archivo correcto. La mayoría de los sistemas operativos aligeran los archivos que no coinciden con los criterios y no se pueden seleccionar.</p>
<div id="ejemplo_sencillo">
<pre class="brush: html notranslate"><p>
<label for="soundFile">Selecciona un archivo de audio:</label>
<input type="file" id="soundFile" accept="audio/*">
</p>
<p>
<label for="videoFile">Selecciona un archivo de video:</label>
<input type="file" id="videoFile" accept="video/*">
</p>
<p>
<label for="imageFile">Selecciona algunas imágenes:</label>
<input type="file" id="imageFile" accept="image/*" multiple>
</p></pre>
<p>{{EmbedLiveSample('ejemplo_sencillo', '100%', 200)}}</p>
<p>Ten en cuenta que el último ejemplo te permite seleccionar varias imágenes. Consulta el atributo <code><a href="multiple">multiple</a></code> para obtener más información.</p>
</div>
<h2 id="Especificadores_de_tipo_de_archivo_únicos">Especificadores de tipo de archivo únicos</h2>
<p>Un <strong>especificador de tipo de archivo único</strong> es una cadena que describe un tipo de archivo que el usuario puede seleccionar en un elemento {{HTMLElement("input")}} de tipo <code>file</code>. Cada especificador de tipo de archivo único puede adoptar una de las siguientes formas:</p>
<ul>
<li>Una extensión de nombre de archivo válida que no distingue entre mayúsculas y minúsculas, que comienza con un punto ("."). Por ejemplo: <code>.jpg</code>, <code>.pdf</code>, o <code>.doc</code>.</li>
<li>Una cadena de tipo MIME válida, sin extensiones.</li>
<li>La cadena <code>audio/*</code> significa "cualquier archivo de audio".</li>
<li>La cadena <code>video/*</code> significa "cualquier archivo de video".</li>
<li>La cadena <code>image/*</code> significa "cualquier archivo de imagen".</li>
</ul>
<p>El atributo <code>accept</code> toma como valor una cadena que contiene uno o más de estos especificadores de tipo de archivo únicos, separados por comas. Por ejemplo, un selector de archivos que necesita contenido que se puede presentar como una imagen, incluidos los formatos de imagen estándar y los archivos PDF, podría verse así:</p>
<pre class="brush: html notranslate"><input type="file" accept="image/*,.pdf"></pre>
<h2 id="Usar_inputs_de_archivo">Usar <em>input</em>s de archivo</h2>
<h3 id="Un_ejemplo_básico">Un ejemplo básico</h3>
<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data">
<div>
<label for="file">Elige el archivo a cargar</label>
<input type="file" id="file" name="file" multiple>
</div>
<div>
<button>Enviar</button>
</div>
</form></pre>
<div class="hidden">
<pre class="brush: css notranslate">div {
margin-bottom: 10px;
}</pre>
</div>
<p>Esto produce la siguiente salida:</p>
<p>{{EmbedLiveSample('Un_ejemplo_básico', 650, 60)}}</p>
<div class="note">
<p><strong>Nota</strong>: También puedes encontrar este ejemplo en GitHub; consulta <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">código fuente</a> y también puedes <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">verlo funcionando en vivo</a>.</p>
</div>
<p>Independientemente del dispositivo o sistema operativo del usuario, el <code><input></code> de archivo proporciona un botón que abre un cuadro de diálogo selector de archivos que permite al usuario elegir un archivo.</p>
<p>La inclusión del atributo <code><a href="multiple">multiple</a></code>, como se muestra arriba, especifica que se pueden elegir varios archivos a la vez. El usuario puede elegir varios archivos del selector de archivos de cualquier manera que la plataforma elegida lo permita (por ejemplo, manteniendo presionada la tecla <kbd>Mayús</kbd> o <kbd>Control</kbd> y luego haciendo clic). Si solo deseas que el usuario elija un único archivo por <code><input></code>, omite el atributo <code>multiple</code>.</p>
<h3 id="Limitar_los_tipos_de_archivo_aceptados">Limitar los tipos de archivo aceptados</h3>
<p>A menudo, no querrás que el usuario pueda elegir cualquier tipo de archivo arbitrario; en su lugar, quieres que seleccionen archivos de un tipo o tipos específicos. Por ejemplo, si la entrada de tu archivo permite a los usuarios cargar una imagen de perfil, probablemente desees que seleccionen formatos de imagen compatibles con la web, como {{Glossary("JPEG")}} o {{Glossary("PNG")}}.</p>
<p>Los tipos de archivo aceptables se pueden especificar con el atributo {{HTMLAttrxRef("accept", "input/file")}}, que toma una lista separada por comas de extensiones de archivo permitidas o tipos MIME. Algunos ejemplos:</p>
<ul>
<li><code>accept="image/png"</code> o <code>accept=".png"</code> — Acepta archivos PNG.</li>
<li><code>accept="image/png, image/jpeg"</code> o <code>accept=".png, .jpg, .jpeg"</code> — Acepta archivos PNG o JPEG.</li>
<li><code>accept="image/*"</code> — Acepta cualquier archivo con un tipo MIME de <code>image/*</code>. (Muchos dispositivos móviles también permiten que el usuario tome una foto con la cámara cuando se usa).</li>
<li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> — Acepta cualquier cosa que huela a un documento de MS Word.</li>
</ul>
<p>Veamos un ejemplo más completo:</p>
<pre class="brush: html notranslate"><form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Elige el archivo para cargar</label>
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg, .png">
</div>
<div>
<button>Enviar</button>
</div>
</form></pre>
<div class="hidden">
<pre class="brush: css notranslate">div {
margin-bottom: 10px;
}</pre>
</div>
<p>{{EmbedLiveSample('Limitar_los_tipos_de_archivo_aceptados', 650, 60)}}</p>
<h2 id="Especificaciones">Especificaciones</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificación</th>
<th scope="col">Estado</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'input.html#attr-input-accept', 'atributo accept')}}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
</tr>
<tr>
<td>{{SpecName('HTML5.1', 'sec-forms.html#attr-input-accept', 'Atributo accept')}}</td>
<td>{{Spec2('HTML5.1')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
<p>{{Compat("html.elements.attribute.accept")}}</p>
<h2 id="Ve_también">Ve también</h2>
<ul>
<li>{{web.link("/es/docs/Using_files_from_web_applications", "Uso de archivos de aplicaciones web")}}</li>
<li>{{web.link("/es/docs/Web/API/File", "API de File")}}</li>
</ul>
|
