title: dynamically add row on click of fileupload showing file details
body: <p>I want to populate the table dynamically with the filename, filesize and some operations like delete the file once the user selects the file to upload, showing details of the file selected to upload, in a table format using jsp, javascript or jquery. Please suggest.Thanks.</p>
  
  <p>--EDITED--
  I have tried the below code, but i'am not sure how to get the file size and perform delete operation without the upload has not yet performed.Whenever user choose the file the details of the file should be shown in the table below.  Please find the similar scenario in <a href="http://jsfiddle.net/s98Tw/2/" rel="nofollow">http://jsfiddle.net/s98Tw/2/</a>.</p>
  
  <p>JSP code:</p>
  
  <p> 
            
              
             </p>
  
  <pre><code>     &lt;table border="1"&gt;
           &lt;tr&gt;
                  &lt;th&gt;SNo&lt;/th&gt;&lt;th&gt;FileName&lt;/th&gt;&lt;th&gt;FileSize&lt;/th&gt;&lt;th&gt;Action&lt;/th&gt; &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;input type="text" name="sno" id="sno"/&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="fileName" id="fileName"/&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="fileSize" id="fileSize"/&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;a href="delete"&gt;Delete&lt;/a&gt;&lt;/input&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
           &lt;/table&gt;
  </code></pre>
  
  <p>JavaScript code:</p>
  
  <pre><code>function addFileData(field){
     var file_name = document.getElementById("file1").value;
      document.getElementById("fileName").value=file_name;
  }
  </code></pre>