[e] (0) Include an example for how to get the filename out of input.v…

…alue git-svn-id: http://svn.whatwg.org/webapps@3863 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Sep 15, 2009 · 3adba15477a87c7cbbcb2284a00b9bf76a25a564 · 3adba15
1 parent 553cf2c
commit 3adba15477a87c7cbbcb2284a00b9bf76a25a564
Unified Split

Showing with 79 additions and 0 deletions.

+39 −0 index

+40 −0 source
diff --git a/index b/index

  </div>
+  
+  <div class=example>
+  
+
+  
+   <p>For historical reasons, the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL attribute prefixes the
+  
+   filename with the string "<code title="">C:\fakepath\</code>". Some
+  
+   legacy user agents actually included the full path (which was a
+  
+   security vulnerability). As a result of this, obtaining the
+  
+   filename from the <code title=dom-input-value><a href=#dom-input-value>value</a></code> IDL
+  
+   attribute in a backwards-compatible way is non-trivial. The
+  
+   following function extracts the filename in a suitably compatible
+  
+   manner:</p>
+  
+
+  
+   <pre>function extractFilename(path) {<!--
+  
+  if (path.substr(0, 12) == "C:\\fakepath\\")
+  
+    return path.substr(12);-->
+  
+  var x;
+  
+  x = path.lastIndexOf('\\');
+  
+  if (x &gt;= 0) // Windows-based path
+  
+    return path.substr(x+1);
+  
+  x = path.lastIndexOf('/');
+  
+  if (x &gt;= 0) // Unix-based path
+  
+    return path.substr(x+1);
+  
+  return path; // just the filename
+  
+}</pre>
+  
+
+  
+   <p>This can be used as follows:</p>
+  
+
+  
+   <pre>&lt;p&gt;&lt;input type=file name=image onchange="updateFilename(this.value)"&gt;&lt;/p&gt;
+  
+&lt;p&gt;The name of the file you picked is: &lt;span id="filename"&gt;(none)&lt;/span&gt;&lt;/p&gt;
+  
+&lt;script&gt;
+  
+ function updateFilename(path) {
+  
+   var name = extractFilename(path);
+  
+   document.getElementById('filename').textContent = name;
+  
+ }
+  
+&lt;/script&gt;</pre>
+  
+
+  
+   <!-- How useful this actually is... is unclear. -->
+  
+
+  
+  </div>
+  
+
  <hr><div class="bookkeeping impl">
   <p>The following common <code><a href=#the-input-element>input</a></code> element content
diff --git a/source b/source

  </div>
+  
+  <div class="example">
+  
+
+  
+   <p>For historical reasons, the <code
+  
+   title="dom-input-value">value</code> IDL attribute prefixes the
+  
+   filename with the string "<code title="">C:\fakepath\</code>". Some
+  
+   legacy user agents actually included the full path (which was a
+  
+   security vulnerability). As a result of this, obtaining the
+  
+   filename from the <code title="dom-input-value">value</code> IDL
+  
+   attribute in a backwards-compatible way is non-trivial. The
+  
+   following function extracts the filename in a suitably compatible
+  
+   manner:</p>
+  
+
+  
+   <pre>function extractFilename(path) {<!--
+  
+  if (path.substr(0, 12) == "C:\\fakepath\\")
+  
+    return path.substr(12);-->
+  
+  var x;
+  
+  x = path.lastIndexOf('\\');
+  
+  if (x >= 0) // Windows-based path
+  
+    return path.substr(x+1);
+  
+  x = path.lastIndexOf('/');
+  
+  if (x >= 0) // Unix-based path
+  
+    return path.substr(x+1);
+  
+  return path; // just the filename
+  
+}</pre>
+  
+
+  
+   <p>This can be used as follows:</p>
+  
+
+  
+   <pre>&lt;p>&lt;input type=file name=image onchange="updateFilename(this.value)">&lt;/p>
+  
+&lt;p>The name of the file you picked is: &lt;span id="filename">(none)&lt;/span>&lt;/p>
+  
+&lt;script>
+  
+ function updateFilename(path) {
+  
+   var name = extractFilename(path);
+  
+   document.getElementById('filename').textContent = name;
+  
+ }
+  
+&lt;/script></pre>
+  
+
+  
+   <!-- How useful this actually is... is unclear. -->
+  
+
+  
+  </div>
+  
+
  <hr>
  <div class="bookkeeping impl">