Stupid File Fields |
Stupid File Fields |
CodeKing |
Nov 6 2006, 06:52 PM
Post
#1
|
Advanced Member Group: Members Posts: 175 Joined: 12-September 06 Member No.: 118 |
How can I get an onfocus and a value parameter on a file field input tag? It doesn't seem to support them.
|
Christian J |
Nov 6 2006, 07:16 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
Do you want to read or set the FILE INPUT's value?
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. |
CodeKing |
Nov 8 2006, 07:04 PM
Post
#3
|
Advanced Member Group: Members Posts: 175 Joined: 12-September 06 Member No.: 118 |
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:
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> CODE <div id="uploadDiv"> <input type="file" name="file" onchange="addFileField(this);" /><br /> </div> How can I fix this? |
Christian J |
Nov 9 2006, 09:45 AM
Post
#4
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
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> 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> |
Lo-Fi Version | Time is now: 19th April 2024 - 04:40 PM |