retain value of input type file in a jsp file while being dynamically generated

Question

i have a jsp page where i have a input type file and i m allowing the user to browse files. i have one such input on jsp and the rest i m generating dynamically by javascript.

this is my jsp code:

<div id="labelContainer" style="display:inline">
<table align="center">
<tr>
<td align="left"><input type="text" id="label0" name="label0" size="15"></td>
<td align="center"><input type="file" id="filePath0" name="browsetrainset0"></td>
<td id="addlabel" ><img src="../images/add.png" title="Add Label" onclick="addLabel()"></td>
<td id="removelabel"><img src="../images/remove.png" title="Remove Label" onclick="removeLabel('labelDiv0')"></td>
</tr>
</table>
</div>

and this is my javacsritp code:

function addLabel(){
var text="";
lCount++;
text+=("<table id='labelDiv"+lCount+"' align='center'>");
text+=("<tr>");
text+=("<td align='left' style='display:none'><input type='checkbox' checked='true' name='labelchkbox'/></td>");
text+=("<td align='left' id='label'><input type='text' id='label"+lCount+"' name='label"+lCount+"' size='15'></td>");
text+=("<td align='center'id='filePath' ><input type='file' id='filePath"+lCount+"'name='browsetrainset"+lCoun t+"'></td>");
text+=("<td id='addlabel' ><img src='../images/add.png' title='Add Label' onclick='addLabel()'></td>");
text+=("<td id='removelabel'><img src='../images/remove.png' title='Remove Label' onclick=\"removeLabel('labelDiv"+lCount+"')\"></td>");
text+=("</tr>");
text+=("</table>");
document.getElementById("labelContainer").innerHTM L+=text;
}

but i m not able to retain the value of the file path i browse, on the jsp page once i click the add label and generate another input type file. I am using IE7. Please tell me how to reatin the value of the browsed files so that i can use them further.

Answer 1

document.getElementById("labelContainer").innerHTM L+=text;

Never, ever use += on innerHTML. It does not do what you think.

Instead, it laboriously serialises the entire contents of the div into HTML, adds your string onto the HTML code, and then parses the whole lot back into objects.

This is slow, and loses all information that cannot be remembered in an HTML string, such as JavaScript references, event handlers (all your onclicks will stop working) and form field contents (including file uploads).

You could add all the new HTML content to a temporary container instead, then move that using DOM methods to the destination:

var div= document.createElement('div');
div.innerHTML= text;
while (div.firstChild)
    document.getElementById("labelContainer").appendChild(div.firstChild);

Or you can use DOM methods to create and add the nodes directly. In your case since the new nodes are so similar to the old ones, you could clone them:

function addLabel() {
    var container= document.getElementById('labelContainer');
    var tables= container.getElementsByTagName('table');
    var n= tables.length;
    var table= tables[0].cloneNode(true);

    table.id= 'labelDiv'+n;
    var inputs= table.getElementsByTagName('input');
    inputs[0].id=inputs[0].name= 'label'+n; 
    inputs[1].id=inputs[1].name= 'browsetrainset'+n; 

    container.appendChild(table);
}

(Care: IE has some issues with changing field names with things like radio buttons though.)

If you want to be accessible without JavaScript (generally a good idea), the usual approach is to include the maximum number of entries you might, and use script to hide the ones that aren't in use.

Answer 2

If I remember correctly, it is not possible to programmatically set the filepsec associated with an <input type="file"> element, as this would constitute a security risk, by allowing malicious scripts to upload files that had not been specifically chosen by the user.

The only way to set the filespec is to browse to it from the web browser.