Tôi có một trang web được tạo bởi HTML+JavaScript là bản demo, tôi muốn biết cách đọc tệp CSV cục bộ và đọc từng dòng để tôi có thể trích xuất dữ liệu từ tệp CSV.
Hỏi ngày 28 tháng 4 năm 2014 lúc 2:22Apr 28, 2014 at 2:22
10
Không có jQuery:
const $output = document.getElementById('output') document.getElementById('file').onchange = function() { var file = this.files[0]; var reader = new FileReader(); reader.onload = function(progressEvent) { // Entire file const text = this.result; $output.innerText = text // By lines var lines = text.split('\n'); for (var line = 0; line < lines.length; line++) { console.log(lines[line]); } }; reader.readAsText(file); };<input type="file" name="file" id="file"> <div id='output'> ... </div>
Hãy nhớ đặt mã JavaScript của bạn sau khi trường tệp được hiển thị.
Teocci
5,8621 Huy hiệu vàng42 Huy hiệu bạc42 Huy hiệu đồng1 gold badge42 silver badges42 bronze badges
Đã trả lời ngày 28 tháng 4 năm 2014 lúc 3:40Apr 28, 2014 at 3:40
SITESSITESsites
21K16 Huy hiệu vàng85 Huy hiệu bạc143 Huy hiệu Đồng16 gold badges85 silver badges143 bronze badges
9
Sử dụng ES6, JavaScript trở nên sạch hơn một chút
handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); }Đã trả lời ngày 18 tháng 2 năm 2017 lúc 15:16Feb 18, 2017 at 15:16
JujodijujodiJuJoDi
14.2K23 Huy hiệu vàng77 Huy hiệu bạc126 Huy hiệu đồng23 gold badges77 silver badges126 bronze badges
6
- Sử dụng JavaScript đơn giản để đọc từng dòng tệp cục bộ trong JavaScript
- Sử dụng mô -đun Node.js <input type="file" name="file" id="file"> <div id='output'> ... </div>3 để đọc tệp cục bộ trong JavaScript
- Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript
Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.
Sử dụng JavaScript đơn giản để đọc từng dòng tệp cục bộ trong JavaScript
Sử dụng mô -đun Node.js <input type="file" name="file" id="file"> <div id='output'> ... </div>3 để đọc tệp cục bộ trong JavaScript
Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript
Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.
<input type="file" name="file" id="file" /> document.getElementById('file').onchange = function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload = function(progressEvent){ console.log(this.result); }; reader.readAsText(file); };Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.
Chúng ta có thể sử dụng thẻ <input type="file" name="file" id="file"> <div id='output'> ... </div>5 HTML để tải lên tệp và chức năng <input type="file" name="file" id="file"> <div id='output'> ... </div>6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng
document.getElementById('file').onchange = function(){ var file = this.files[0]; var reader = new FileReader(); reader.onload = function(progressEvent){ var fileContentArray = this.result.split(/\r\n|\n/); for(var line = 0; line < lines.length-1; line++){ console.log(line + " --> "+ lines[line]); } }; reader.readAsText(file); };Ví dụ về mã:
Ở đây, trường đầu vào được chọn bằng phương thức <input type="file" name="file" id="file"> <div id='output'> ... </div>7, sẽ kích hoạt hàm bất cứ khi nào nó được thay đổi (bất cứ khi nào một tệp được chọn). Chúng tôi tạo một thể hiện mới của đối tượng <input type="file" name="file" id="file"> <div id='output'> ... </div>6. Khi phiên bản <input type="file" name="file" id="file"> <div id='output'> ... </div>9 được kích hoạt, một hàm có tham số handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 0 được gọi và chúng ta có thể in toàn bộ nội dung của tệp trên bảng điều khiển là handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 1.
Line 1 Line 2 Line 3 Line 5Chúng ta có thể mở rộng chức năng để đọc nội dung của dòng tệp theo từng dòng, như được hiển thị bên dưới.
Output:
1 --> Line 1 2 --> Line 2 3 --> Line 3 4 --> 5 --> Line 5Đoạn trích mở rộng từ phương thức trước sử dụng handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 2 để phân chia nội dung được đọc bởi biến kết quả và lưu trữ nó thành biến handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 3 mảng. Sau đó, vòng lặp handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 4 được sử dụng để lặp qua từng dòng của biến handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 3 và in từng dòng nội dung tệp.
Sử dụng mô -đun Node.js <input type="file" name="file" id="file"> <div id='output'> ... </div>3 để đọc tệp cục bộ trong JavaScript
Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript
const readline = require('readline'); const fs = require('fs');Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.
Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.
const readLine = require('readline'); const f = require('fs'); var file = './demo.txt'; var rl = readLine.createInterface({ input : f.createReadStream(file), output : process.stdout, terminal: false }); rl.on('line', function (text) { console.log(text); });Chúng ta có thể sử dụng thẻ <input type="file" name="file" id="file"> <div id='output'> ... </div>5 HTML để tải lên tệp và chức năng <input type="file" name="file" id="file"> <div id='output'> ... </div>6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng
Output:
Line 1 Line 2 Line 3 Line 5Sử dụng mô -đun <input type="file" name="file" id="file"> <div id='output'> ... </div>4 trong Node.js để đọc tệp cục bộ trong JavaScript
Bài viết này sẽ giới thiệu các cách để đọc qua tệp bằng cách sử dụng JavaScript bằng Vanilla JS và JavaScript Framework Node.js.
Chúng ta có thể tạo một chức năng JavaScript đơn giản để đọc tệp cục bộ được đặt dưới dạng đầu vào HTML.
Chúng ta có thể sử dụng thẻ <input type="file" name="file" id="file"> <div id='output'> ... </div>5 HTML để tải lên tệp và chức năng <input type="file" name="file" id="file"> <div id='output'> ... </div>6 để đọc nội dung từ dòng tệp theo dòng với việc sử dụng chức năng
Mã ví dụ:
<input type="file" name="file" id="file"> <div id='output'> ... </div>1Chúng ta có thể lưu tệp <input type="file" name="file" id="file" /> 2 vào thư mục nơi đặt tệp handleFiles(input) { const file = input.target.files[0]; const reader = new FileReader(); reader.onload = (event) => { const file = event.target.result; const allLines = file.split(/\r\n|\n/); // Reading line by line allLines.forEach((line) => { console.log(line); }); }; reader.onerror = (event) => { alert(event.target.error.name); }; reader.readAsText(file); } 6 hoặc chúng ta có thể đặt đường dẫn đến tệp một cách rõ ràng, sẽ đọc nội dung của dòng tệp bằng đường dòng in đầu ra vào bảng điều khiển.
Output:
Line 1 Line 2 Line 3 Line 5