Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
[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
|
||
</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 >= 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><p><input type=file name=image onchange="updateFilename(this.value)"></p> | ||
<p>The name of the file you picked is: <span id="filename">(none)</span></p> | ||
<script> | ||
function updateFilename(path) { | ||
var name = extractFilename(path); | ||
document.getElementById('filename').textContent = name; | ||
} | ||
</script></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 |
|
||
</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><p><input type=file name=image onchange="updateFilename(this.value)"></p> | ||
<p>The name of the file you picked is: <span id="filename">(none)</span></p> | ||
<script> | ||
function updateFilename(path) { | ||
var name = extractFilename(path); | ||
document.getElementById('filename').textContent = name; | ||
} | ||
</script></pre> | ||
|
||
<!-- How useful this actually is... is unclear. --> | ||
|
||
</div> | ||
|
||
<hr> | ||
|
||
<div class="bookkeeping impl"> |