Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[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
  • Loading branch information
Hixie committed Sep 15, 2009
1 parent 553cf2c commit 3adba15
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 0 deletions.
39 changes: 39 additions & 0 deletions index
Expand Up @@ -34165,6 +34165,45 @@ interface <dfn id=htmlformelement>HTMLFormElement</dfn> : <a href=#htmlelement>H

</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
Expand Down
40 changes: 40 additions & 0 deletions source
Expand Up @@ -37984,6 +37984,46 @@ interface <dfn>HTMLFormElement</dfn> : <span>HTMLElement</span> {

</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">
Expand Down

0 comments on commit 3adba15

Please sign in to comment.