Показать содержимое CSV после загрузки в HTML

Я пытаюсь показать содержимое CSV после загрузки на HTML-страницу. Этот мой код. Я использую javascript, но это не работает.Показать содержимое CSV после загрузки в HTML

Я ссылался на этот блог для достижения этого. 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>]&nbsp;&nbsp; 
         </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>&nbsp;&nbsp;</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>&nbsp;&nbsp;</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>

источник

2015-08-27 fiddle

Вы можете использовать уже данное возможное решение о Stack OverFlow, который покажет вам, как читать CSV-файл с JQuery. :) Может быть, это поможет вам. :)

источник

2015-08-27 06:39:51

Я хочу связать его с событием загрузки. Как только кнопка загрузки будет нажата, она должна показать содержимое CSV. – fiddle

@ user121: проверьте этот http://jsfiddle.net/W8fME/266/ –

Привет, Muhammad. Ссылка, которую вы предоставили, работает только для файла csv только с одной строкой и без разрывов строк. Я ищу что-то, что я могу использовать для реального csv с разрывами строк. – fiddle

Показать содержимое CSV после загрузки в HTML

ответ

Смежные вопросы