Làm cách nào chúng tôi có thể đọc và ghi tệp bằng JavaScript?

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 tệp, cách cổ điển #

Hướng dẫn này chỉ cho bạn cách

• Chọn tệp tin
  • Sử dụng phần tử đầu vào HTML
  • Sử dụng vùng kéo và thả
• Đọc siêu dữ liệu tệp
• Đọc nội dung của một 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" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
script>

7, đượ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 bao gồm thuộc tính

<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>

8, 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

<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>

9 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ừ

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

0, là đối tượng

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

0. Mỗi mục trong

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

0 là một đối tượng

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

2

<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 thức

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

3 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 phần 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 polyfill

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 mà 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 thuộc tính

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

4 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" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
script>

7 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" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
script>

7, 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 thức

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

7 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 phần 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" id="file-selector" multiple>
<script>
  const fileSelector = document.getElementById('file-selector');
  fileSelector.addEventListener('change', (event) => {
    const fileList = event.target.files;
    console.log(fileList);
  });
script>

7. 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">

9 và

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);
});

0. Sự kiện

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

9 cập nhật giao diện người dùng của trình duyệt để biểu thị trực quan rằng hành động kéo và thả đang tạo một bản sao của tệp. Sự kiện

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);
});

0 được kích hoạt sau khi người dùng thả các tệp lên bề mặt. Tương tự như phần tử đầu vào, bạn có thể truy cập danh sách các tệp từ

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);
});

3, là đối tượng

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

0. Mỗi mục trong

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

0 là một đối tượng

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

2

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);
});

7 và

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);
});

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

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);
});

9 trên phần tử

<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>

7 cho phép người dùng chọn một hoặc nhiều thư mục. Nó được hỗ trợ trong hầu hết các trình duyệt chính ngoại trừ Firefox dành cho Android

Kiểm tra xem phương thức

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

01 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 trở lại thư mục, ngoài việc đọc. Phương pháp này có thể được polyfill

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">

2 cho thư mục, nhưng không cung cấp quyền truy cập vào bất kỳ tệp nào trong thư mục

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

Đối tượng

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

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

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

0

Bạn có thể thấy điều này đang hoạt động trong bản demo

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

04

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

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

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

05, cho phép bạn đọc nội dung của đối tượng

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

2 vào bộ nhớ. Bạn có thể hướng dẫn

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

05 đọc tệp dưới dạng bộ đệm mảng, URL dữ liệu hoặc văn bản

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

8

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

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

2 do người dùng cung cấp, sau đó chuyển đổi nó thành một URL dữ liệu và sử dụng URL dữ liệu đó để hiển thị hình ảnh trong phần tử

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

09. Hãy xem bản demo của

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

80 để 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 tệp #

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

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

81 do

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

05 cung cấp. Sự kiện

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

81 cung cấp hai thuộc tính,

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

84 (số lượng đã đọc) và

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

85 (số lượng cần đọc)

Có thể sử dụng JavaScript để ghi vào tệp không?

JavaScript có thể đọc hoặc ghi tệp trên máy tính của người dùng không?

JavaScript có thể đọc tệp văn bản không?

JavaScript có thể đọc và ghi các tệp cục bộ không?