在线播放国产精品,网站深夜在线视频观看日韩欧美,在线涩涩免费观看国产精品

技術(shù)頻道 - js技術(shù)

使用HTML5和JQuery讀取CSV(Text)文件的實例

作者:admin 時間:2019-8-29 11:14:11 瀏覽:

本文介紹使用HTML5和JQuery讀取CSV(Text)文件的簡單實例。

CSV文件內(nèi)容如圖：

CSV文件

Text文件內(nèi)容如圖（逗號分隔的文本文件）：

Text文件

使用HTML5和JQuery讀取CSV(Text)文件

HTML代碼

此代碼段使用JQuery和HTML5讀取、分析和顯示在客戶端的FileUpload控件（HTML文件輸入）中選擇的CSV文件（或逗號分隔的文本文件）。

HTML5允許開發(fā)人員使用javascript和JQuery訪問文件內(nèi)容和詳細信息，因此在支持HTML5的瀏覽器中，可以輕松讀取文件內(nèi)容。

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
</head>
<body>

<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;
    if (regex.test($("#fileUpload").val().toLowerCase())) {
      if (typeof (FileReader) != "undefined") {
        var reader = new FileReader();
        reader.onload = function (e) {
          var table = $("<table />");
          var rows = e.target.result.split("\n");
          for (var i = 0; i < rows.length; i++) {
            var row = $("<tr />");
            var cells = rows[i].split(",");
            for (var j = 0; j < cells.length; j++) {
              var cell = $("<td />");
              cell.html(cells[j]);
              row.append(cell);
            }
           table.append(row);
          }
          $("#dvCSV").html('');
          $("#dvCSV").append(table);
        }
        reader.readAsText($("#fileUpload")[0].files[0]);
      } else {
        alert("This browser does not support HTML5.");
      }
    } else {
      alert("Please upload a valid CSV file.");
    }
});
});
</script>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" />
<hr />
<div id="dvCSV">
</div>
</body>
</html>