title: Add multiple upload files and clear the text in browse input
body: <p>I have customize the design upload file input so that it looks same in all browsers.
  Now I want to add 10 more upload file inputs one by one by clicking on add another file link.
  These 10 upload files should look same in design as the customized upload file input. </p>
  
  <p>I also want to have a clear link so that if a user click on clear the text should get clear if there any in the upload file input.</p>
  
  <p>And can we also clear the 10 upload files.</p>
  
  <p>like i can add and clear the upload file simultaneously.</p>
  
  <p>Can I get any help in this?</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;script language="JavaScript"&gt; 
  function validate_fileext() {
          var check = true;
          var error_msg = "Only PDF, JPG, JPEG, HTML, HTM and TIF accepted, please try again.";
              for (var j = 0; j &lt;=upload_number; j++) {
                  if (document.getElementById("attachment"+j) != null) {
                      var file = document.getElementById("attachment" + j).value.toLowerCase();
                      if (file != "" &amp;&amp; !(file.lastIndexOf(".pdf") &gt; 0 || file.lastIndexOf(".jpg") &gt; 0 || file.lastIndexOf(".jpeg") &gt; 0 ||                
                          file.lastIndexOf(".htm") &gt; 0 || file.lastIndexOf(".html") &gt; 0 || file.lastIndexOf(".tif") &gt; 0)) {
                          check = false;
                         document.getElementById("static_error_message").innerHTML = 'Error : Only PDF, JPG, JPEG, HTML, HTM and TIF accepted as attachment(s).';
                          document.getElementById("attachment" + j).focus();
                          break;
                      }   
                  }
              }
             return check; 
  } 
  
  function togglePOAttachment(){
     if (document.forms["frm_payment"].opt_payment[0].checked){
          document.getElementById("attachment0").disabled = false;
          document.getElementById("link_clear").setAttribute("href","javascript:resetFileContent();")
          document.getElementById("link_clear").disabled = false;
          document.getElementById('moreUploadsLink').style.visibility = 'visible'; 
     }else if (document.forms["frm_payment"].opt_payment[1].checked) {
           for (var j = 1; j &lt; upload_number; j++) {          
              reSetPOAttachments("f"+j);
           }
          upload_number = 1;
          resetFileContent();
          document.getElementById('moreUploadsLink').style.visibility = 'hidden'; 
          document.getElementById("attachment0").disabled = true;
          document.getElementById("link_clear").disabled = true;
          document.getElementById("link_clear").removeAttribute("href");
     }
  }
  
  function resetFileContent(){
      document.getElementById("static_attachment").innerHTML = '&lt;input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display  = \'block\';" /&gt;&lt;a  id="link_clear" href="javascript:resetFileContent();"&gt;Clear&lt;/a&gt; ';   
  }
  
   function reSetPOAttachments(i){
       var elm = document.getElementById(i);
       document.getElementById("moreUploads").removeChild(elm); 
   }   
  &lt;/script&gt;
  </code></pre>
  
  <p>When I click on clear link to clear the default text from the upload file input it replace the input with the customized input which displaying default.</p>
  
  <p>This is the function you will find in the above script:</p>
  
  <pre><code>function resetFileContent(){
      document.getElementById("static_attachment").innerHTML = '&lt;input type="file" name="attachment0" id="attachment0" onchange="document.getElementById(\'moreUploadsLink\').style.display  = \'block\';" /&gt;&lt;a  id="link_clear" href="javascript:resetFileContent();"&gt;Clear&lt;/a&gt; ';   
  }
  </code></pre>
  
  <p>I want to customize the design for this upload file input. and for those who are repeating.</p>
  
  <hr>
  
  <p>Can I modify the style of an input type file generating from JavaScript. Like the one below:-</p>
  
  <pre><code>&lt;script language="JavaScript"&gt; 
   var upload_number = 1; 
  function addFileInput()
     {
  
        var d = document.createElement("div");
        var l = document.createElement("a");
        var file = document.createElement("input");
        file.setAttribute("type", "file");
        file.setAttribute("name", "attachment"+upload_number);
        file.setAttribute("id", "attachment"+upload_number);
        l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
        l.appendChild(document.createTextNode("Clear"));
        d.setAttribute("id", "f"+upload_number);  
         d.appendChild(file);
        d.appendChild(l);
  
        document.getElementById("moreUploads").appendChild(d);
        document.getElementById("attachments").value = upload_number;
        upload_number++;
     }
     function removeFileInput(i)
     {
       var elm = document.getElementById(i);
       document.getElementById("moreUploads").removeChild(elm);
     }   
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks,</p>