Post
Ask Question

Reading A CSV File Using HTML5 And jQuery

Reading A CSV File Using HTML5 And jQuery 

 
In this blog, we will learn how to read a CSV file from the client-side and display its contents in an Html table by making use of the FileReader() method in HTML5 & Jquery.
 
First, we will create a file upload button, HTML table, which is hidden first and an input button, which on clicking calls the function to export CSV data to the table.
  1. <input type="file" id="csvfile" />  
  2. <input type="button" id="viewfile" value="Export To Table" onclick="ExportToTable()" />  
  3. <br />  
  4. <br />  
  5. <table id="csvtable">  
  6.     <thead>  
  7.         <tr>  
  8.             <th>    
  9.                 Name    
  10.             </th>  
  11.             <th>    
  12.                 Job    
  13.             </th>  
  14.             <th>    
  15.                 City    
  16.             </th>  
  17.             <th>    
  18.                 State    
  19.             </th>  
  20.         </tr>  
  21.     </thead>  
  22.     <tbody></tbody>  
  23. </table>     
Now, our JavaScript function ExportToTable() is given below.
  1. < script type = "text/javascript" >  
  2.  function ExportToTable() {  
  3.   var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;  
  4.   //Checks whether the file is a valid csv file    
  5.   if (regex.test($("#csvfile").val().toLowerCase())) {  
  6.    //Checks whether the browser supports HTML5    
  7.    if (typeof(FileReader) != "undefined") {  
  8.     var reader = new FileReader();  
  9.     reader.onload = function(e) {  
  10.      var table = $("#csvtable > tbody");  
  11.      //Splitting of Rows in the csv file    
  12.      var csvrows = e.target.result.split("\n");  
  13.      for (var i = 0; i < csvrows.length; i++) {  
  14.       if (csvrows[i] != "") {  
  15.        var row = "<tr>";  
  16.        var csvcols = csvrows[i].split(",");  
  17.        //Looping through each cell in a csv row    
  18.        for (var j = 0; j < csvcols.length; j++) {  
  19.         var cols = "<td>" + csvcols[j] + "</td>";  
  20.         row += cols;  
  21.        }  
  22.        row += "</tr>";  
  23.        table.append(row);  
  24.       }  
  25.      }  
  26.      $('#csvtable').show();  
  27.     }  
  28.     reader.readAsText($("#csvfile")[0].files[0]);  
  29.    } else {  
  30.     alert("Sorry! Your browser does not support HTML5!");  
  31.    }  
  32.   } else {  
  33.    alert("Please upload a valid CSV file!");  
  34.   }  
  35.  }  
  36. lt;  
  37. /script>    
Our sample CSV file contains the data given below.
  1. Midhun, Developer, Pune, Maharashtra  
  2. Rajeev,Tester,Mumbai,Maharashtra  
  3. Dhanya, Designer, Rajkot, Gujarat  
  4. Preethi, Developer, Bangalore, Karnataka  
Now, on selecting this CSV file and clicking on the "Export To Table" button will export the data to the table, as shown below.
 
a
 
I hope this will be helpful!
Next Recommended Reading Reading An XML File Using HTML5 And jQuery