I am trying to show the content of a CSV after the upload on the HTML page. This my code. I am using javascript but this doesnt works.
I refered to this blog for achieving this. http://www.aspsnippets.com/Articles/Read-Parse-and-display-CSV-Text-file-using-JavaScript-jQuery-and-HTML5.aspx
<%@ include file="/WEB-INF/jsp/includes.jsp"%>
<%@ page import="java.lang.*,java.util.*"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" href="<c:url value="/static/css/stickyFooter.css" />" type="text/css"></link>
<script type="text/javascript" src="<c:url value="/static/js/jquery.js" /> "></script>
<script type="text/javascript" src="<c:url value="/static/js/jquery-ui.js" />"></script>
<script type="text/javascript" src="<c:url value="/static/js/jquery.validate.js" /> "></script>
<script type="text/javascript" src="<c:url value="/static/js/jquery-cookie.js" /> "></script>
<script type="text/javascript" src="<c:url value="/static/js/json2.min.js" /> "></script>
<script type="text/javascript" src="<c:url value="/static/js/jquery.event.drag-2.2.js"/>"></script>
<script type="text/javascript" src="<c:url value="/static/js/slick.core.js"/>"></script>
<script type="text/javascript" src="<c:url value="/static/js/slick.grid.js"/>"></script>
<script type="text/javascript" src="<c:url value="/static/js/slick.dataview.js"/>"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="container" style="text-align: left;float:left;margin-left:4px;">
<div class="ui-widget">
</div><br />
<div class="ui-widget"><span class="pageTitle">upload</span></div><br />
<div>
<div class="column span-15">
<div id="UploadDownload" class="ui-widget ui-state-default ui-helper-clearfix ui-corner-all ui-no-background ui-padded-content append-bottom-small">
<form:form id="UploadForm" method="post" modelAttribute="UploadForm" action="submitUploadForm" enctype="multipart/form-data">
<table class="ui-widget" width="100%">
<tr>
<td valign="top" colspan=3 height="40px">
<div class="column span-15 highlight">
To upload/modify/delete multiple cars, upload CSV formatted file with respect to the template.
<p>Click on Download </p>
</div>
</td>
<div class="abc" id="downloadBtn">
[<a href="/mso/interop/download.do" class="ui-widget"><strong>Download </strong>
<img border=0 src='<c:url value="/static/images/icon_excel.gif" />' /></a>]
</div>
</td>
</tr>
<tr>
<td>
<div class="column span-2_5"><label for="filedata">Select CSV File:</label><span style="color: red">*</span></div>
</td>
<td >
<div class="column span-6"><input class="span-5 ui-input" type="file" id="fileData" name="fileData" size="45" /></div>
<div class="column span-4">
<input type="submit" value="Upload File" "/>
</div>
</td>
</tr>
<c:if test="${successMsg != null and not empty successMsg}">
<tr>
<td colspan=5> </td>
</tr>
<tr>
<td colspan=5><div id="successMsg"><span style="color: green">${successMsg}</span></div></td>
</tr>
</c:if>
<c:if test="${failureMsg != null and not empty failureMsg}">
<tr>
<td colspan=5> </td>
</tr>
<tr>
<td colspan=5><div id="failureMsg"><span style="color: red">${failureMsg}</span></div></td>
</tr>
</c:if>
</table>
</form:form>
</div>
<div id="dvCSV">
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("button, input:button").button();
Upload();
});
function Upload() {
var fileUpload = document.getElementById("fileData");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;
if (regex.test(fileUpload.value.toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var table = document.createElement("table");
var rows = e.target.result.split("\n");
for (var i = 0; i < rows.length; i++) {
var row = table.insertRow(-1);
var cells = rows[i].split(",");
for (var j = 0; j < cells.length; j++) {
var cell = row.insertCell(-1);
cell.innerHTML = cells[j];
}
}
var dvCSV = document.getElementById("dvCSV");
dvCSV.innerHTML = "";
dvCSV.appendChild(table);
}
reader.readAsText(fileUpload.files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
}
</script>
</body>
</html>
