Full Version: Stupid File Fields
How can I get an onfocus and a value parameter on a file field input tag? It doesn't seem to support them.
Do you want to read or set the FILE INPUT's value?
To read it you can use
Setting a default value like
To read it you can use
CODE
onfocus="alert(this.value)"
but since the user must first select a file I advice against the onfocus event, onchange seems to work better. Also different browsers return different values in various ways.Setting a default value like
CODE
<input type="file" name="" value="foo.jpg">
may not be allowed by popular browsers, in any case a default value makes little sense since you can't know which files and directories the user has.
Problem: The onchange is triggered when you just click on the field, and when you click the browse button and select a file nothing shows. Here's an example:
How can I fix this?
CODE
<script language="javascript" type="text/javascript">
<!--
function addFileField(handler) { //Add another file field to upload page
var uploadDiv = document.getElementById('uploadDiv');
uploadDiv.innerHTML = uploadDiv.innerHTML + '<input type="file" name="file" onchange="addFileField(this);" /><br />';
handler.onchange = "";
}
//-->
</script>
<!--
function addFileField(handler) { //Add another file field to upload page
var uploadDiv = document.getElementById('uploadDiv');
uploadDiv.innerHTML = uploadDiv.innerHTML + '<input type="file" name="file" onchange="addFileField(this);" /><br />';
handler.onchange = "";
}
//-->
</script>
CODE
<div id="uploadDiv">
<input type="file" name="file" onchange="addFileField(this);" /><br />
</div>
<input type="file" name="file" onchange="addFileField(this);" /><br />
</div>
How can I fix this?
QUOTE(CodeKing @ Nov 9 2006, 01:04 AM) 
when you click the browse button and select a file nothing shows. Here's an example:
CODE
<script language="javascript" type="text/javascript">
<!--
function addFileField(handler) { //Add another file field to upload page
var uploadDiv = document.getElementById('uploadDiv');
uploadDiv.innerHTML = uploadDiv.innerHTML + '<input type="file" name="file" onchange="addFileField(this);" /><br />';
handler.onchange = "";
}
//-->
</script>
<!--
function addFileField(handler) { //Add another file field to upload page
var uploadDiv = document.getElementById('uploadDiv');
uploadDiv.innerHTML = uploadDiv.innerHTML + '<input type="file" name="file" onchange="addFileField(this);" /><br />';
handler.onchange = "";
}
//-->
</script>
Don't know what happens there, but for one thing it appears innerHTML doesn't show the FILE INPUT's value, so maybe it gets lost? The following seems to work in my newer Windows browsers, but I haven't tested it with an actual file upload script. Each successive FILE INPUT element is given the NAME "file0", "file1", etc. You can only make new INPUTs by changing the latest, empty one.
But a more reliable solution might be to let the server-side script create more FILE INPUTs if needed, or display a number of them from the start.
CODE
<div id="div">
<input type="file" name="file0">
</div>
<script type="text/javascript">
function init()
{
var div=document.getElementById('div');
var input=div.getElementsByTagName('input');
function make_input()
{
var new_input=document.createElement('input');
new_input.type='file';
new_input.style.display='block'; // Just for line-breaks.
div.appendChild(new_input);
init();
}
for(var i=0; i<input.length; i++)
{
if(input[i].type=='file')
{
input[i].name='file'+i;
input[i].index_number=i;
input[i].onchange=function()
{
if(this.index_number==input.length-1) // Only the last INPUT can make new one.
{
make_input();
}
}
}
}
}
init();
</script>
<input type="file" name="file0">
</div>
<script type="text/javascript">
function init()
{
var div=document.getElementById('div');
var input=div.getElementsByTagName('input');
function make_input()
{
var new_input=document.createElement('input');
new_input.type='file';
new_input.style.display='block'; // Just for line-breaks.
div.appendChild(new_input);
init();
}
for(var i=0; i<input.length; i++)
{
if(input[i].type=='file')
{
input[i].name='file'+i;
input[i].index_number=i;
input[i].onchange=function()
{
if(this.index_number==input.length-1) // Only the last INPUT can make new one.
{
make_input();
}
}
}
}
}
init();
</script>
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.