These several days, I am coding a asp.net page on which user can click a button to add as many file upload control if he like and upload multiple file to web server. Initially I used the javascript function insertAjacentHTML("beforeEnd","htmlstring") to accomplish this functionality. But customer reported that the page can't work in Firefox browser. After viewing error info thru debug console built in Firefox, the insertAjacentHTML was not recognized as a valid function by Firefox. Therefore a second way I adopted. I concatenated html string using innerHTML property of DHTML object, but it result in another problem. When the button was clicked, the file path info was missing and the UI is not user friendly with this way customer was not satisfied. Finally after searching on internet, I use the following javascript to accomplish this functionality and make it cross IE and Firefox.

 

function addFile()
    {
     //var str = '
';
     //comment the following lines because of not work in Firefox browser.
     //document.getElementById('MyFile').insertAdjacentHTML("beforeEnd",str)
     //var ele = document.getElementById('MyFile');
     //ele.innerHTML=ele.innerHTML + str;
     //use the following W3C standard javascript API
     var MyFile = document.getElementById('MyFile');
 
     var linebreak = document.createElement("BR");
     MyFile.appendChild(linebreak);
       
     var ctrl = document.createElement("INPUT");
     ctrl.setAttribute("type","file");
     ctrl.setAttribute("runat","server");
     ctrl.setAttribute("class","TextBoxStyle");
     ctrl.setAttribute("size","50");
     ctrl.setAttribute("name","File");
     MyFile.appendChild(ctrl);
    }