Note The answers comments below reflect the state of legacy browsers in 2009. Now you can actually set the value of the file input element dynamically. Styling a html file upload button in pure css could be cumbersome if youve ever tried. Ccmsetup.Exe Command Line Install here. Take a look at the following screenshot about how different browsers deal with. Style a HTML file upload control using CSS and Java. Adding file upload fields dynamically to an HTML page using Javascript. This tutorial explains how to dynamically add and remove input fields in an HTML page using Javascript. In the following article, Im going to show you how to dynamically create new HTML input fields using Javascript Document Object Model. What Ill be demonstarting below is how to use this technique to dynamically add a new file upload field to a form each time the existing file upload field is used. Also, we will be allowing users to remove the files they have previously added. Fire Emblem Sacred Dawn Patch on this page. I4ePz.jpg' alt='Javascript Upload Input File' title='Javascript Upload Input File' />Step 1 The HTML page lt form methodPOST enctypemultipartform data lt input typehidden namefilecount idfilecount value0 lt table idfilestable border0 cellpadding0 cellspacing0 lt tr idnewfilerow lt td lt input typefile namenewfile0 idnewfile0 readonlyreadonly onchangeaddnewfilethis lt td lt tr lt table lt form The HTML form would initially contain only one file upload input field. The next step would be implementing the Javascript function that dynamically append a new file upload field to the form when this one is used. Step 2 Javascript function to a add a new file upload field function addnewfilefield Get the number of files previously uploaded. Intdocument. get. Element. By. Idfilecount. Get the name of the file that has just been uploaded. Element. By. Idnewfilecount. Hide the file upload control containing the information about the picture that was just uploaded. Element. By. Idnewfilerow. Element. By. Idnewfilerow. Get a reference to the table containing the uploaded pictures. Element. By. Idfilestable Insert a new row with the file name and a delete button. Rowtable. rows. length row. Cell0 cell. 0. HTML lt input typetext disableddisabled nameinsertedfilecount valuefilename lt input typebutton namedeletecount valueDelete onclickdeleteinsertedthis Increment count of the number of files uploaded. Insert a new file upload control in the table. Rowtable. rows. length row. Cell0 cell. 0. HTML lt input typefile namenewfilecount idnewfilecount readonlyreadonly onchangeaddnewfilethis     Update the value of the file hidden input tag holding the count of files uploaded. Element. By. Idfilecount. Each time the file upload input field in the HTML form is used, this function will hide the row containing the file upload field and create a new empty file upload field to allow the user to upload another file. However, the existing file upload field has to be preserved it cannot be removed because it contains the uploaded file path and data. Instead of removing the field, we just hide it and add a new readonly text field with a Delete button next to it to allow the user to remove the uploaded file in a user friendly way. Step 3 Javascript function to delete previously uploaded files function deleteinsertedfield Get the field name. Extract the file id from the field name. Of 1, name. Of name. Of 1 Hide the row displaying the uploaded file name. Element. By. Idinsertedfileid. Get a reference to the uploaded file control. Element. By. Idnewfileid Remove the new file control. Node. remove. Childcontrol Finally, the last step would be implementing a function to delete the uploaded file when the Delete button is clicked.