63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>CSV文件上传和分析</title>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>CSV文件上传和分析</h1>
|
||
|
|
|
||
|
|
<input type="file" id="csvFileInput" accept=".csv">
|
||
|
|
<button onclick="handleFileUpload()">上传</button>
|
||
|
|
|
||
|
|
<table id="csvTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>BPI Code</th>
|
||
|
|
<th>Reference(s)</th>
|
||
|
|
<th>Value</th>
|
||
|
|
<th>Package</th>
|
||
|
|
<th>Qty</th>
|
||
|
|
<th>Footprint</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody></tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function handleFileUpload() {
|
||
|
|
var fileInput = document.getElementById('csvFileInput');
|
||
|
|
var file = fileInput.files[0];
|
||
|
|
|
||
|
|
var reader = new FileReader();
|
||
|
|
reader.onload = function(e) {
|
||
|
|
var contents = e.target.result;
|
||
|
|
var csvData = $.csv.toArrays(contents);
|
||
|
|
|
||
|
|
var tableBody = document.querySelector('#csvTable tbody');
|
||
|
|
tableBody.innerHTML = '';
|
||
|
|
|
||
|
|
for (var i = 0; i < csvData.length; i++) {
|
||
|
|
var rowData = csvData[i];
|
||
|
|
var row = document.createElement('tr');
|
||
|
|
|
||
|
|
for (var j = 0; j < rowData.length; j++) {
|
||
|
|
var cellData = rowData[j];
|
||
|
|
var cell = document.createElement('td');
|
||
|
|
cell.textContent = cellData;
|
||
|
|
row.appendChild(cell);
|
||
|
|
}
|
||
|
|
|
||
|
|
tableBody.appendChild(row);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
reader.readAsText(file);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.8/jquery.csv.min.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|