Odczyt CSV w javascript i File API
Pokażę jak za pomocą javascript i html5 File api odczytać dane z pliku CSV i wstawić je np. do textarei. Do odczytu wykorzystamy FileReader API. Najpierw sprawdzamy czy przeglądarka obsługuje tę funkcjonalność.
function handleFiles(files) { if (window.FileReader) { // FileReader jest obsługiwany. } else { alert('FileReader nie jest obsługiwany.'); } }
<input type="file" id="csv" onchange="handleFiles(this.files)" accept=".csv">Funkcją handleFiles przechwytujemy wybrane pliki, ale nas interesuje tylko jeden.
function handleFiles(files) { if (window.FileReader) { getAsText(files[0]); } else { alert('FileReader nie jest obsługiwany.'); } } function getAsText(fileToRead) { var reader = new FileReader(); reader.readAsText(fileToRead); reader.onload = loadHandler; reader.onerror = errorHandler; } function loadHandler(event) { var csv = event.target.result; processData(csv); } function processData(csv) { var allTextLines = csv.split(/\r\n|\n/); var lines = []; for (var i=0; i<allTextLines.length; i++) { var data = allTextLines[i].split(';'); var tarr = []; for (var j=0; j<data.length; j++) { tarr.push(data[j]); } lines.push(tarr); } return lines; } function errorHandler(evt) { if(evt.target.error.name == "NotReadableError") { alert("Nie można odczytać pliku."); } }W naszym przykładzie chcemy odczytać plik CSV jako tekst. Robimy to w funkcji getAsText. Po odczytaniu referencji do pliku używamy metody readAsText, aby odczytać dane jako tekst (FileReader posiada też inne metody: readAsBinaryString oraz readAsArrayBuffer). Przetwarzamy go potem funkcją processData, która zwraca tablicę składającą się z wierszy pliku CSV.