Question

我试图在HTML页面上传后显示CSV的内容。这是我的代码。我使用的是javascript，但这不起作用。

我参考了这个博客来实现这个目标。 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>

Answer 1

您可以使用已在Stack OverFlow上提供的可能解决方案，该解决方案将向您展示如何使用jQuery读取CSV文件。 :)也许这会对你有所帮助。：）

在HTML上传后显示CSV的内容

1 个答案: