files/es/web/api/file/webkitrelativepath/index.html


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

---
title: File.webkitRelativePath
slug: Web/API/File/webkitRelativePath
tags:
  - Archivo
  - Entidades Archivo y Directorio de la API
  - File API
  - Propiedad
  - Referencia
  - Solo lectura
  - Web
translation_of: Web/API/File/webkitRelativePath
---
<p>{{APIRef("File API")}}{{non-standard_header}}</p>

<p>La propiedad <code><strong>File.webkitRelativePath</strong></code> de solo lectura contiene un {{domxref("USVString")}} el cual especifica la ruta relativa del archivo al directorio seleccionado por el usuario en un elemento {{HTMLElement("input")}} con su {{htmlattrxref("webkitdirectory", "input")}} atributo definido.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="brush: js"><em>var rulaRelativa = File</em>.webkitRelativePath</pre>

<h3 id="Valor">Valor</h3>

<p>Un {{domxref("USVString")}} conteniendo la ruta del archivo relativa al directorio padre seleccionado por el usuario.</p>

<h2 id="Example" name="Example">Ejemplo</h2>

<p>En este ejemplo,un seleccionador de directorios es mostrado al usuario para permitirle seleccionar uno o mas directorios. Cuando el evento {{event("change")}} ocurre, una lista de todos los archivos contenidos dentro de la gerarquia de directorio seleccionado es generado y mostrado.</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;input type="file" id="filepicker" name="fileList" webkitdirectory multiple /&gt;
&lt;ul id="listing"&gt;&lt;/ul&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">document.getElementById("filepicker").addEventListener("change", function(event) {
  let output = document.getElementById("listing");
  let files = event.target.files;

  for (let i=0; i&lt;files.length; i++) {
    let item = document.createElement("li");
    item.innerHTML = files[i].webkitRelativePath;
    output.appendChild(item);
  };
}, false);
</pre>

<h3 id="Resultado">Resultado</h3>

<p>{{ EmbedLiveSample('Example') }}</p>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificacion</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentario</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('File System API', '#dom-file-webkitrelativepath', 'webkitRelativePath') }}</td>
   <td>{{ Spec2('File System API') }}</td>
   <td>Especificacion inicial.</td>
  </tr>
 </tbody>
</table>

<p>Esta API no tiene especificacion W3C o WHATWG.</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con navegadores</h2>

<p>{{ CompatibilityTable }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Caracteristica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Soporte basico</td>
   <td>13 {{ property_prefix("webkit") }}</td>
   <td>{{ CompatGeckoDesktop(49) }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Caracteristica</th>
   <th>Android</th>
   <th>Chrome para Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte basico</td>
   <td>{{ CompatNo }}</td>
   <td>0.16 {{ property_prefix("webkit") }}</td>
   <td>{{ CompatGeckoMobile(49) }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatNo }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Vea_también">Vea también</h2>

<ul>
 <li><a href="/es/docs/Web/API/File_and_Directory_Entries_API">Entidades "Archivo" y "Directorio" en la API</a></li>
 <li>{{domxref("HTMLInputElement.webkitEntries")}}</li>
 <li>{{domxref("HTMLInputElement.webkitdirectory")}}</li>
</ul>