Question

I have a screen as shown in the below image. Once a file is selected, I need to display the selected file name with complete path in the “Import Files”.alt text http://img821.imageshack.us/img821/2844/fileupload.jpg

I suppose, it has be done with the javascript. Someone, please give me an idea how to achieve this functionality.

Answer 1

You can dynamically generate <tr> element to represent row in your table. For example:

function AddRow(int serialNumber, string fileName)
{
   var table = document.getElementById('tableId');
   table.innerHtml += "<tr><td>" + serialNumber + "</td><td>" + fileName+ "</td></tr>
}

Also the truth is that you cannot intercept full file path in javascript. You can only get a filename and put it in your table.

You can fire it as an event on the onchange event of the input:

<input type="file" onchange="javascript:AddRow(serialNumber, this.value); serialNumber++;">

Also you have to declare your serial number property somewhere on the top of your file f.e.

<script type="text/javascript">var serialNumber = 0;</script>