Làm cách nào để đọc nội dung từ tệp văn bản trong JavaScript?

JavaScript cho phép các trang web đọc và hiển thị các phần tử một cách linh hoạt. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách đọc tệp văn bản trong JavaScript

Sử dụng hàm blob.text() để đọc tệp văn bản trong JavaScript

Phương thức blob.text() của giao diện Blob đưa ra một lời hứa phân giải thành một chuỗi chứa nội dung của blob, được hiểu là UTF-8. Chúng ta có thể sử dụng nó để đọc các tệp cục bộ

Thẻ có thể được sử dụng để chọn tệp cần thiết. Sau khi chọn tệp, chúng ta sẽ đọc nội dung của nó bằng hàm blob.text(). Chúng tôi hiển thị đầu ra trên trang web

Xem đoạn mã sau

  
    Read Text File Tutorial
  
  
    
    

    
    
  

Trong ví dụ trên, chúng tôi đã tạo một trường đầu vào loại file, cho phép chúng tôi cung cấp một tệp làm đầu vào. Sau đó chỉ định một

Có thể thực hiện thao tác đọc ghi trong tệp bằng một số câu lệnh. Nhưng mô-đun cần thiết để thực hiện các thao tác này phải được nhập. Mô-đun bắt buộc là 'fs' được gọi là mô-đun Hệ thống tệp trong JavaScript

Viết thao tác trên một tập tin

Sau khi tệp Hệ thống tệp được nhập, thao tác writeFile() được gọi. Phương thức writeFile() được sử dụng để ghi vào tệp trong JavaScript. Cú pháp của phương thức này như sau -

writeFile(path,inputData,callBackFunction)

Hàm writeFile() chấp nhận ba tham số -

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp hoặc tên của tệp mà dữ liệu đầu vào sẽ được ghi vào

  Nếu đã có một tệp, thì nội dung trong tệp sẽ bị xóa và đầu vào do người dùng cung cấp sẽ được cập nhật hoặc nếu tệp không có, thì tệp có tệp đó sẽ được tạo trong đường dẫn đã cho và đầu vào

• inputData - Tham số thứ hai là dữ liệu đầu vào chứa dữ liệu được ghi trong tệp được mở

• callBackFuntion − Tham số thứ ba là hàm gọi lại hàm lấy lỗi làm tham số và hiển thị lỗi nếu thao tác ghi không thành công

ví dụ 1

Sau đây là một ví dụ về thao tác ghi vào tệp trong JavaScript

const fs = require('fs')
let fInput = "You are reading the content from Tutorials Point"
fs.writeFile('tp.txt', fInput, (err) => {
   if (err) throw err;
   else{
      console.log("The file is updated with the given data")
   }
})

Nếu bạn mở tệp đầu vào, bạn có thể quan sát dữ liệu được viết trong đó như hình bên dưới -

Đọc từ tập tin

Sau khi mô-đun Hệ thống tệp được nhập, việc đọc tệp trong JavaScript có thể được thực hiện bằng cách sử dụng hàm readFile()

cú pháp

Cú pháp để đọc từ một tệp như sau -

readFile(path, format, callBackFunc)

Hàm readFile() chấp nhận ba tham số trong đó có một tham số tùy chọn

• Đường dẫn - Tham số đầu tiên là đường dẫn của tệp thử nghiệm mà từ đó nội dung sẽ được đọc. Nếu vị trí hoặc thư mục hiện tại là cùng thư mục chứa tệp sẽ được mở và đọc thì chỉ cần cung cấp tên tệp

• Định dạng - Tham số thứ hai là tham số tùy chọn là định dạng của tệp văn bản. Định dạng có thể là ASCII, utf-8, v.v.

• CallBackFunc − Tham số thứ ba là chức năng gọi lại lấy lỗi làm tham số và hiển thị lỗi được nêu ra do lỗi

ví dụ 2

Ví dụ sau cố gắng đọc nội dung của tệp được điền trong ví dụ trước và in nó -

const fs = require('fs')
fs.readFile('tp.txt', (err, inputD) => {
   if (err) throw err;
      console.log(inputD.toString());
})

đầu ra

Sau đây là đầu ra của ví dụ trên -

You are reading the content from Tutorials Point

Văn bản được hiển thị trong bảng điều khiển là văn bản trong tệp đã cho

ví dụ 3

Sau đây là một ví dụ kết hợp về cách đọc và ghi tệp ở trên bằng cách sử dụng mô-đun fs trên nút. js. Hãy để chúng tôi tạo một tệp JS có tên chính. js có đoạn mã sau -

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 cách 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

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

<!-- The `multiple` attribute lets users select multiple files. -->
<input type="file" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
</script>

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

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

Kéo và thả tùy chỉnh

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 cho phép người dùng kéo và thả hình ảnh vào bất kỳ đâu trong 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,

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

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

Thuộc tính

const dropArea = document.getElementById('drop-area');

dropArea.addEventListener('dragover', (event) => {
  event.stopPropagation();
  event.preventDefault();
  // Style the drag-and-drop as a "copy file" operation.
  event.dataTransfer.dropEffect = 'copy';
});

dropArea.addEventListener('drop', (event) => {
  event.stopPropagation();
  event.preventDefault();
  const fileList = event.dataTransfer.files;
  console.log(fileList);
});

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

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

Đọc siêu dữ liệu tệp

Đối tượng

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

function getMetadataForFileList(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 trình diễn

function getMetadataForFileList(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});
  }
}

Đọc nội dung của một tập tin

Để đọc tệp, hãy sử dụng

function getMetadataForFileList(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});
  }
}

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

function getMetadataForFileList(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});
  }
}

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

Ví dụ trên đọc một

<input type="file" id="file-selector" accept=".jpg, .jpeg, .png">

function getMetadataForFileList(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});
  }
}

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

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

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

function getMetadataForFileList(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});
  }
}

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

function readImage(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;
  }

  const reader = new FileReader();
  reader.addEventListener('load', (event) => {
    img.src = event.target.result;
  });
  reader.readAsDataURL(file);
}

Làm cách nào để mở tệp văn bản trong JavaScript?

Làm cách nào để đọc dữ liệu từ tệp văn bản?