Bài viết ngắn này cho thấy một cách đơn giản để sử dụng JS thuần túy để tương tác với các tệp cục bộ của người dùng mà không cần chuyển dữ liệu qua mạng. Phương pháp này có sẵn trong hầu hết các trình duyệt web crom như Google Chrome, MS Edge, v.v.
ví dụ 1. Đọc tệp và siêu dữ liệu của chúng
Ví dụ sau sử dụng đầu vào HTML đơn giản để đọc [các] tệp từ thiết bị người dùng và in ra siêu dữ liệu tệp trong bảng điều khiển trình duyệt
ví dụ 2. Đọc tệp văn bản dưới dạng chuỗi [hoặc JSON]
Ví dụ này bao gồm chức năng giải mã cơ sở 64 và sự kiện trình đọc để nghe khi tệp được đọc. Sau khi tệp được tải, kết quả văn bản được in ra dưới dạng Chuỗi tại HTML đích
Bạn có thể bao gồm chức năng phân tích cú pháp nếu tệp của bạn là JSON, XML, v.v.
Ví dụ trực tiếp trên JSFiddle
ví dụ 3. Đọc một tập tin hình ảnh
Ví dụ này cập nhật nguồn hình ảnh trên trang HTML thành tệp đã tải lên của người dùng
Bạn có thể bao gồm trình đọc siêu dữ liệu từ ví dụ 1 để kiểm tra xem tệp đã tải lên có phải là hình ảnh không
Ví dụ trực tiếp trên JSFiddle
Tôi hy vọng bạn thích bài viết này và thấy nó hữu ích cho công việc hoặc dự án hàng ngày của bạn
Tham gia Medium với liên kết giới thiệu của tôi - Joe T. Santhanavanich
Là thành viên Phương tiện, một phần phí thành viên của bạn sẽ được chuyển đến các tác giả mà bạn đã đọc và bạn có toàn quyền truy cập vào mọi câu chuyện…
trung bình. com
Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi
Hướng dẫn này sẽ chỉ ra cách đọc tệp từ hệ thống tệp cục bộ bằng cách thực hiện các bước sau
- Allowing the user to choose file from the device through file element.
- Đọc siêu dữ liệu [tên, loại & kích thước] của tệp bằng các thuộc tính của đối tượng Tệp đã chọn.
- Đọc nội dung của tệp bằng cách sử dụng đối tượng FileReader .
Bước 1 - Cho phép người dùng chọn tệp
Read File
Bước 2 — Đọc Siêu dữ liệu Tệp [Tên, Loại & Kích thước] bằng Thuộc tính của Đối tượng Tệp
Tệp do người dùng chọn có thể được truy cập dưới dạng đối tượng Tệp trong Javascript. Thuộc tính tên, loại & kích thước của đối tượng Tệp này cung cấp siêu dữ liệu của tệp đã chọn.
document.querySelector["#read-button"].addEventListener['click', function[] {
if[document.querySelector["#file-input"].files.length == 0] {
alert['Error : No file selected'];
return;
}
// file selected by user
let file = document.querySelector["#file-input"].files[0];
// file name
let file_name = file.name;
// file MIME type
let file_type = file.type;
// file size in bytes
let file_size = file.size;
}];
Bước 3 — Đọc nội dung tệp bằng cách sử dụng FileReader Object
Nội dung của đối tượng Tệp đã chọn được đọc bằng cách sử dụng Trình đọc tệp object. Reading is performed asynchronously, and both text and binary file formats can be read.
- Có thể đọc các tệp văn bản [TXT, CSV, JSON, HTML, v.v.] bằng phương thức readAsText[] .
- Có thể đọc các tệp nhị phân [EXE, PNG, MP4, v.v.] bằng phương thức readAsArrayBuffer[] .
- Chuỗi url dữ liệu có thể được đọc bằng phương thức readAsDataURL[] .
document.querySelector["#read-button"].addEventListener['click', function[] {
if[document.querySelector["#file-input"].files.length == 0] {
alert['Error : No file selected'];
return;
}
// file selected by user
let file = document.querySelector["#file-input"].files[0];
// new FileReader object
let reader = new FileReader[];
// event fired when file reading finished
reader.addEventListener['load', function[e] {
// contents of the file
let text = e.target.result;
document.querySelector["#file-contents"].textContent = text;
}];
// event fired when file reading failed
reader.addEventListener['error', function[] {
alert['Error : Failed to read file'];
}];
// read file as text file
reader.readAsText[file];
}];
Các câu hỏi thường gặp khác về đọc tệp bằng Javascript
Làm cách nào để theo dõi tiến trình đọc của tệp?
Sự kiện tiến trình của đối tượng FileReader xử lý việc đọc .
// file read progress event
reader.addEventListener['progress', function[e] {
if[e.lengthComputable == true] {
// percentage of the file read
let percent_read = Math.floor[[e.loaded/e.total]*100];
console.log[percent_read + '% read'];
}
}];
Để lấy dữ liệu nhị phân của tệp, hãy sử dụng readAsBinaryString[] / readAsArrayBuffer method needs to be used.
Đọc Đọc một tệp và lấy dữ liệu nhị phân của nó trong Javascript để biết thêm chi tiết
Làm cách nào để đọc một tệp có trên máy chủ?Có thể đọc tệp trên máy chủ bằng Javascript bằng cách tải xuống tệp bằng AJAX và phân tích cú pháp phản hồi của máy chủ