我需要能够从 CSV 文件中获取数据（该文件已由用户通过<input type="file" id="fileInput">）并将其放入数组中。我宁愿避免使用 jquery，因为我以前没有使用过它，但任何帮助将不胜感激。这是我的代码：
<div id="page-wrapper">
<div>
Select a text file:
<input type="file" id="fileInput">
</div>
<pre id="fileDisplayArea"><pre>
</div>
<p id="csvData"></p>
<button onClick="test()">Show Text</button>
<script>
function test (){
var file = fileInput.files[0];
var textType = /text.*/;
var csvType = 'application/vnd.ms-excel';
if (file.type.match(csvType)) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("csvData").innerHTML=reader.result;
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
}
</script>
处理一个csv输入文件，您需要做两件事：
您可以通过使用来完成这两项操作String.prototype.split。该方法将字符串拆分为数组。要在每个新行上拆分，请使用正则表达式/\n/。要分割每一列，请使用数据中使用的字符（可能是, or ;).
这是一个例子：
// Create an array of arrays
// Remove first line
// Split by ","
function process(dataString) {
var lines = dataString
.split(/\n/) // Convert to one string per line
.map(function(lineStr) {
return lineStr.split(","); // Convert each line to array (,)
})
.slice(1); // Discard header line
return JSON.stringify(lines, null, 2);
}
function test() {
var file = fileInput.files[0];
var textType = /text.*/;
var csvType = 'text/csv';
if (file.type.match(csvType)) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("csvData").innerHTML = process(reader.result);
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
}
<div id="page-wrapper">
<div>
Select a text file:
<input type="file" id="fileInput" />
</div>
<pre id="fileDisplayArea"></pre>
<pre id="csvData"></pre>
<button onClick="test()">Show Text</button>
</div>
将此数据片段存储为.csv要测试的文件：
ONE,TWO,THREE
1,2,3
2,4,6
3,6,9
附加说明：如果数据中有标题行（如上面的示例所示），我强烈建议不要映射到数组，而是映射到对象。这使您的代码更易于阅读和使用：
// Create an array of objects
// Use the first line as keys
// Split by ","
function process(dataString) {
var lines = dataString
.split(/\n/)
.map(function(lineStr) {
return lineStr.split(",");
});
var keys = lines[0];
var objects = lines
.slice(1)
.map(function(arr) {
return arr.reduce(function(obj, val, i) {
obj[keys[i]] = val;
return obj;
}, {});
});
return JSON.stringify(objects, null, 2);
}
function test() {
var file = fileInput.files[0];
var textType = /text.*/;
var csvType = 'text/csv';
if (file.type.match(csvType)) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("csvData").innerHTML = process(reader.result);
}
reader.readAsText(file);
} else {
fileDisplayArea.innerText = "File not supported!";
}
}
<div id="page-wrapper">
<div>
Select a text file:
<input type="file" id="fileInput" />
</div>
<pre id="fileDisplayArea"></pre>
<pre id="csvData"></pre>
<button onClick="test()">Show Text</button>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
