Cấu trúc thư mục trong ví dụ giả định rằng tệp index.js và tệp example.txt nằm trong cùng một thư mục và thiết bị đầu cuối của chúng tôi cũng nằm trong thư mục đó
Phương thức đọc không đồng bộ nội dung của tệp được cung cấp
Nếu bạn không cung cấp giá trị cho tham số encoding, thì phương thức này sẽ trả về một bộ đệm, nếu không, một giá trị string sẽ được trả về
Phương thức trả về một lời hứa giải quyết với nội dung của tệp, vì vậy chúng ta phải await nó hoặc sử dụng phương thức .then() trên nó để lấy chuỗi đã giải quyết
Chúng tôi đã sử dụng Chuỗi. phương pháp phân tách để phân chia nội dung trên mỗi ký tự dòng mới
Chúng tôi đã chuyển một biểu thức chính quy cho phương thức fsPromises.readFile()0
const arr = contents.split(/\r?\n/);
Dấu gạch chéo về phía trước fsPromises.readFile()1 đánh dấu phần đầu và phần cuối của biểu thức chính quy
Chúng tôi muốn thay thế cả fsPromises.readFile()2 và fsPromises.readFile()3 vì ngắt dòng khác nhau tùy thuộc vào hệ điều hành
Ví dụ: Windows sử dụng fsPromises.readFile()4 làm ký tự cuối dòng, trong khi fsPromises.readFile()3 là ký tự mặc định trong Unix
Dấu chấm hỏi fsPromises.readFile()6 khớp với mục trước đó (\r) 0 hoặc 1 lần. Nói cách khác, fsPromises.readFile()2 có thể có hoặc không có ở đó
Phương thức fsPromises.readFile()0 trả về một mảng chứa các chuỗi con (mỗi dòng) dưới dạng các phần tử
Ngoài ra, bạn có thể đọc tệp đồng bộ
Đọc tệp văn bản vào Mảng một cách đồng bộ bằng cách sử dụng Nút. js
Sử dụng phương pháp fsPromises.readFile()9 để đọc tệp văn bản thành một mảng trong JavaScript, e. g. String.split()0
Phương thức sẽ trả về nội dung của tệp, mà chúng ta có thể phân chia trên mỗi ký tự dòng mới để nhận được một chuỗi các chuỗi
Hàm từ ví dụ đầu tiên đọc nội dung của tệp một cách đồng bộ
Phương thức lấy đường dẫn đến tệp làm tham số đầu tiên và encoding làm tham số thứ hai
Phương thức trả về nội dung của đường dẫn được cung cấp
Nếu bạn bỏ qua tham số encoding thì hàm sẽ trả về một bộ đệm, ngược lại sẽ trả về một chuỗi
Đọc tệp văn bản vào Mảng không đồng bộ bằng cách sử dụng. sau đó()
Mẫu mã đầu tiên đọc tệp văn bản thành một mảng không đồng bộ bằng cách sử dụng String.split()3
Nếu bạn thích sử dụng cú pháp .then() và String.split()5 khi xử lý Lời hứa, hãy sử dụng đoạn mã sau để thay thế
Mẫu mã đạt được kết quả tương tự nhưng sử dụng cú pháp .then() và String.split()5 thay vì khối String.split()8 sử dụng String.split()3
Cách đơn giản nhất để đọc tệp trong Node. js là sử dụng phương thức fs.readFile(), truyền cho nó đường dẫn tệp, mã hóa và hàm gọi lại sẽ được gọi với dữ liệu tệp (và lỗi)
JScopy
Ngoài ra, bạn có thể sử dụng phiên bản đồng bộ fs.readFileSync()
JScopy
Bạn cũng có thể sử dụng phương pháp fsPromises.readFile() dựa trên lời hứa được cung cấp bởi mô-đun fs/promises
JScopy
Cả ba fs.readFile(), fs.readFileSync() và fsPromises.readFile() đều đọc toàn bộ nội dung của tệp trong bộ nhớ trước khi trả lại dữ liệu
Điều này có nghĩa là các tệp lớn sẽ có tác động lớn đến mức tiêu thụ bộ nhớ và tốc độ thực thi chương trình của bạn
Chọn và tương tác với các tệp trên thiết bị cục bộ của người dùng là một trong những tính năng được sử dụng phổ biến nhất trên web. Nó cho phép người dùng chọn tệp và tải chúng lên máy chủ, ví dụ: tải ảnh lên hoặc gửi tài liệu thuế, v.v. Tuy nhiên, nó cũng cho phép các trang web đọc và thao tác với chúng mà không cần phải truyền dữ liệu qua mạng
API truy cập hệ thống tệp hiện đại
API truy cập hệ thống tệp cung cấp một cách dễ dàng để đọc và ghi vào tệp và thư mục trên hệ thống cục bộ của người dùng. Nó hiện khả dụng trong hầu hết các trình duyệt dựa trên Chromium như Chrome hoặc Edge. Để tìm hiểu thêm về nó, hãy xem bài viết API truy cập hệ thống tệp
Vì API truy cập hệ thống tệp chưa tương thích với tất cả các trình duyệt, hãy xem browser-fs-access, một thư viện trợ giúp sử dụng API mới ở bất cứ đâu có sẵn, nhưng quay lại các phương pháp tiếp cận cũ khi không có
Làm việc với các tệp, cách cổ điển
Hướng dẫn này chỉ cho bạn cách
Chọn tệp tin
Chọn tệp tin
phần tử đầu vào HTML
Cách dễ nhất để người dùng chọn tệp là sử dụng phần tử <input type="file">, được hỗ trợ trong mọi trình duyệt chính. Khi được nhấp vào, nó cho phép người dùng chọn một tệp hoặc nhiều tệp nếu thuộc tính được bao gồm, sử dụng giao diện người dùng chọn tệp tích hợp trong hệ điều hành của họ. Khi người dùng chọn xong một tệp hoặc nhiều tệp, sự kiện change của phần tử sẽ kích hoạt. Bạn có thể truy cập danh sách các tệp từ event.target.files, là đối tượng
Kiểm tra xem phương pháp này có phải là giải pháp thay thế khả thi cho trường hợp sử dụng của bạn hay không, vì phương pháp này cũng cung cấp cho bạn một trình xử lý tệp để bạn có thể ghi lại vào tệp, ngoài việc đọc. Phương pháp này có thể được
Ví dụ này cho phép người dùng chọn nhiều tệp bằng cách sử dụng giao diện người dùng chọn tệp tích hợp trong hệ điều hành của họ, sau đó ghi nhật ký từng tệp đã chọn vào bảng điều khiển
Giới hạn các loại tệp người dùng có thể chọn
Trong một số trường hợp, bạn có thể muốn giới hạn các loại tệp mà người dùng có thể chọn. Ví dụ: một ứng dụng chỉnh sửa hình ảnh chỉ nên chấp nhận hình ảnh, không chấp nhận tệp văn bản. Để làm điều đó, hãy thêm một thuộc tính vào phần tử đầu vào để chỉ định loại tệp nào được chấp nhận
Trong một số trình duyệt, phần tử <input type="file"> cũng là mục tiêu thả, cho phép người dùng kéo và thả tệp vào ứng dụng của bạn. Tuy nhiên, mục tiêu rơi nhỏ và có thể khó sử dụng. Thay vào đó, khi bạn đã cung cấp chức năng cốt lõi bằng cách sử dụng phần tử <input type="file">, bạn có thể cung cấp một bề mặt kéo và thả lớn, tùy chỉnh
Kiểm tra xem phương pháp này có phải là giải pháp thay thế khả thi cho trường hợp sử dụng của bạn hay không, vì phương pháp này cũng cung cấp cho bạn một trình xử lý tệp để bạn có thể ghi lại vào tệp, ngoài việc đọc
Chọn khu vực thả của bạn
Bề mặt thả của bạn phụ thuộc vào thiết kế ứng dụng của bạn. Bạn có thể chỉ muốn một phần của cửa sổ là bề mặt thả xuống hoặc có khả năng là toàn bộ cửa sổ
Squoosh biến toàn bộ cửa sổ thành vùng thả
Squoosh cho phép người dùng kéo và thả hình ảnh ở bất kỳ đâu vào cửa sổ và nhấp vào chọn hình ảnh sẽ gọi phần tử <input type="file">. Bất cứ điều gì bạn chọn làm vùng thả của mình, hãy đảm bảo rằng người dùng rõ ràng rằng họ có thể kéo và thả tệp vào bề mặt đó
Xác định khu vực thả
Để cho phép một phần tử trở thành vùng kéo và thả, bạn cần lắng nghe hai sự kiện,
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
8 dừng hành vi mặc định của trình duyệt và thay vào đó cho phép mã của bạn chạy. Nếu không có chúng, trình duyệt sẽ điều hướng khỏi trang của bạn và mở các tệp mà người dùng đã thả vào cửa sổ trình duyệt
Kiểm tra Kéo và thả tùy chỉnh để xem minh họa trực tiếp
Còn thư mục thì sao?
Thật không may, ngày nay không có cách nào tốt để truy cập một thư mục
dropArea.addEventListener('dragover',(event)=>{ event.stopPropagation(); event.preventDefault(); // Style the drag-and-drop as a "copy file" operation. event.dataTransfer.dropEffect ='copy'; });
9 trên phần tử <input type="file"> cho phép người dùng chọn một hoặc nhiều thư mục. Nó ngoại trừ Firefox dành cho Android
Kiểm tra xem phương thức này có phải là một giải pháp thay thế khả thi cho trường hợp sử dụng của bạn hay không, vì nó cũng cung cấp cho bạn một điều khiển thư mục để bạn có thể ghi lại thư mục, ngoài việc đọc. Phương pháp này có thể được
Nếu tính năng kéo và thả được bật, người dùng có thể thử kéo một thư mục vào vùng thả. Khi sự kiện drop được kích hoạt, nó sẽ bao gồm một đối tượng
2 chứa siêu dữ liệu về tệp. Hầu hết các trình duyệt cung cấp tên tệp, kích thước của tệp và loại MIME, mặc dù tùy thuộc vào nền tảng, các trình duyệt khác nhau có thể cung cấp thông tin khác hoặc bổ sung
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
Bạn có thể thấy điều này đang hoạt động trong bản demo
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
4
Đọc nội dung của một tập tin
Để đọc tệp, hãy sử dụng
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
5 đọc tệp dưới dạng bộ đệm mảng, URL dữ liệu hoặc văn bản
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
2 do người dùng cung cấp, sau đó chuyển đổi nó thành URL dữ liệu và sử dụng URL dữ liệu đó để hiển thị hình ảnh trong phần tử
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
9. Hãy xem bản demo của
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
0 để biết cách xác minh rằng người dùng đã chọn một tệp hình ảnh
Theo dõi tiến trình của một tập tin đã đọc
Khi đọc các tệp lớn, có thể hữu ích khi cung cấp một số UX để cho biết quá trình đọc đã tiến triển đến đâu. Đối với điều đó, hãy sử dụng sự kiện
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
functiongetMetadataForFileList(fileList){ for(const file of fileList){ // Not supported in Safari for iOS. const name = file.name ? file.name :'NOT SUPPORTED'; // Not supported in Firefox for Android or Opera for Android. const type = file.type ? file.type :'NOT SUPPORTED'; // Unknown cross-browser support. const size = file.size ? file.size :'NOT SUPPORTED'; console.log({file, name, type, size}); } }
5. Sự kiện
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
functionreadImage(file){ // Check if the file is an image. if(file.type &&!file.type.startsWith('image/')){ console.log('File is not an image.', file.type, file); return; }
Nhập mô-đun fs trong chương trình và sử dụng các chức năng để đọc văn bản từ các tệp trong hệ thống . Chức năng đã sử dụng. Các hàm readFile() được sử dụng cho thao tác đọc.
Làm cách nào để hiển thị tệp văn bản trong JavaScript?
Trong trường hợp này, chúng tôi đang sử dụng FileReader. readAsText() method để đọc cục bộ. tập tin txt. Mã này in nội dung của tệp đầu vào giống hệt như trong tệp đầu vào.
Làm cách nào để đọc tệp văn bản cục bộ trong JavaScript?
Yes JS can read local files (see FileReader()) but not automatically: the user has to pass the file or a list of files to the script with an html . Then with JS it is possible to process (example view) the file or the list of files, some of their properties and the file or files content.
Làm cách nào để đọc tệp bằng JavaScript?
Để đọc tệp, sử dụng FileReader , cho phép bạn đọc nội dung của đối tượng Tệp vào bộ nhớ. Bạn có thể hướng dẫn FileReader đọc tệp dưới dạng bộ đệm mảng, URL dữ liệu hoặc văn bản. // Kiểm tra xem file có phải là ảnh không.