我需要一个HTML5文件,读取CSV文件时,页面加载将在本地/我的网站/我们的服务器上托管。CSV文件将有3个列表:部门、类别、产品类型。页面需要有3个搜索框,这些(每一个)搜索/过滤器的某些部门/类别/产品类型的关键字。
我完全是新的web开发和HTML5/jQuery,我有以下工作,你必须手动选择文件,然后单击上传显示内容。我在想换掉
reader.readAsText($("#fileUpload")[0].files[0]);
到
reader.readAsText(string filename);
原因是-我已经知道文件名,所以可以指定它,但我知道你不能传递一个字符串到
reader.readAsText
代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSV Downloader</title>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#upload").bind("click", function () {
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv)$/;
var localCSVfile = "C:\Users\User1\Desktop\Temp\Test for HTML5.csv";
var test1 = false;
if (regex.test(localCSVfile.toLowerCase())) {
test1 = true;
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 />
Department:<br>
<input type="text" name="department">
<br>
Categories:<br>
<input type="text" name="categories">
<br>
Product Types:<br>
<input type="text" name="producttypes">
<br>
<div id="dvCSV">
</div>
</body>
</html>
我不想点击/上传按钮/功能,因为我想CSV文件自动加载时,页面加载,也3搜索框应该实际上过滤相应的列表中的CSV文件,并显示它(目前搜索框不做任何事情)。
1条答案
按热度按时间lmyy7pcs1#
试着改变一下:
$("#upload").bind("click",function ()
转换为$(document).ready(function()