Cách mở các tập tin cục bộ trong trình duyệt bằng file:///

Việc sử dụng trình duyệt như một trình quản lý tập tin nhỏ là hoàn toàn khả thi và nếu được sử dụng đúng cách, nó có thể cực kỳ hữu ích. Từ việc mở một tài liệu cục bộ đơn giản bằng file:/// đến việc làm việc với API truy cập hệ thống tệp mạnh mẽ.Ngày nay, các trình duyệt hiện đại cung cấp nhiều tính năng hơn so với những gì chúng ta thường sử dụng.

Trong suốt hướng dẫn này, chúng ta sẽ thấy từng bước một, cách mở các tập tin cục bộ trong trình duyệt web Sử dụng file:/// trong Chrome, Edge và FirefoxHướng dẫn cách biến trình duyệt của bạn thành một trình quản lý tập tin cơ bản trên Windows và Android, và cách các nhà phát triển có thể tiến thêm một bước nữa bằng cách sử dụng API truy cập hệ thống tập tin để đọc, ghi và quản lý các tập tin và thư mục cục bộ từ một ứng dụng web.

Việc mở các tập tin cục bộ bằng file:/// thực sự có nghĩa là gì?

Khi bạn viết một tuyến đường bắt đầu bằng file:/// trong thanh địa chỉ của trình duyệt, Bạn đang yêu cầu trình duyệt truy cập hệ thống tập tin cục bộ thay vì internet.Tức là, mở một thứ gì đó nằm trên thiết bị của bạn: ổ cứng, bộ nhớ trong hoặc thẻ SD.

Lược đồ URL đặc biệt này (file:///) Nó hoạt động tương tự như việc gõ C: trong Windows hoặc / trong Windows. Linux và macOSNó chỉ được điều chỉnh cho phù hợp với logic của trình duyệt. Từ đó, những gì bạn thấy sẽ là một dạng danh sách các thư mục và tệp tin, không có gì cầu kỳ: tên, kích thước, ngày sửa đổi và một vài thông tin khác.

Tất nhiên, phải ghi nhớ rằng Trình duyệt xử lý các tuyến đường cục bộ này với nhiều hạn chế bảo mật.Ví dụ, một trang web bạn truy cập từ internet không thể tự động đọc các tệp cục bộ của bạn chỉ vì bạn mở URL bằng file:///Luôn cần có sự cho phép hoặc cử chỉ rõ ràng từ người dùng.

Sử dụng trình duyệt như một trình quản lý tập tin trên Android

Nhiều điện thoại Android không được nhà sản xuất tích hợp sẵn trình quản lý tập tin tốt, hoặc trình quản lý tập tin được cài đặt sẵn khá hạn chế. Trong những trường hợp đó, Việc sử dụng Chrome, Edge hoặc một trình duyệt dựa trên Chromium khác làm trình duyệt tạm thời có thể giúp bạn giải quyết vấn đề..

Bí quyết rất đơn giản: Mở trình duyệt dựa trên Chromium (Chrome, Edge, Brave, v.v.) và nhập vào thanh địa chỉ. tệp: /// sdcard /Android nhận diện lưu trữ nội bộ chính như sdcardTương tự như cách Windows sử dụng ổ C: làm ổ đĩa chính.

Khi bạn mở địa chỉ đó, trình duyệt thường sẽ yêu cầu quyền truy cập vào bộ nhớ trong. Sau khi bạn cấp quyền đó, một chỉ mục sẽ xuất hiện hiển thị các thư mục gốc của bộ nhớ trong.Từ đó, bạn có thể truy cập và thoát khỏi các thư mục giống hệt như khi duyệt một trang web có các liên kết.

Trong mỗi thư mục, bạn sẽ thấy cả thư mục con và các tệp tin. Các tệp được hiển thị đầy đủ tên, bao gồm cả phần mở rộng, kích thước và ngày sửa đổi cuối cùng.Những mục sau đây cũng được liệt kê: thư mục ẩn, trong Android thường bắt đầu bằng dấu chấm, ví dụ như .nomedia hoặc những cái tương tự khác.

Mặc dù danh sách rất đơn giản, Hầu hết các trình duyệt hiện đại đều có khả năng mở trực tiếp nhiều loại tệp bằng cách chạm vào chúng.Hình ảnh, video, âm thanh, tài liệu văn bản, v.v. Không có hình thu nhỏ hoặc bản xem trước, nhưng chỉ cần nhấp vào tên tệp sẽ khiến trình duyệt cố gắng hiển thị hoặc phát tệp đó.

Biến Chrome và Edge thành một trình quản lý tập tin nhỏ gọn trên máy tính của bạn.

Trên máy tính để bàn, cả trên hệ điều hành Windows và các hệ điều hành khác, Bạn cũng có thể sử dụng Chrome, Edge và các trình duyệt dựa trên Chromium khác để điều hướng các ổ đĩa cục bộ của mình bằng file:///Nguyên tắc tương tự như trên Android, nhưng đường dẫn thì khác.

Nếu bạn sử dụng Windows, ổ đĩa chính thường là C:. Trong trường hợp đó, nhập vào thanh địa chỉ file:///C: và nhấn EnterTrình duyệt sẽ hiển thị cho bạn nội dung của thư mục gốc của ổ đĩa đó: các thư mục như... Windows, Program Files, Usuarios, Vv

Nếu bạn có nhiều ổ đĩa hoặc phân vùng, Bạn có thể thay thế chữ cái trong URL bằng chữ cái tương ứng.. Ví dụ file:///D: cho một album khác hoặc file:///E: để làm kỷ niệm USB Nó được gắn kèm với chữ cái đó. Từ đó, hãy nhấp vào các thư mục để tiếp tục và sử dụng nút quay lại của trình duyệt để quay lại.

Cũng giống như trên Android, Trong mỗi thư mục, bạn sẽ thấy các tệp và thư mục con với kích thước, ngày sửa đổi và phần mở rộng được hiển thị.Nó không tạo ảnh thu nhỏ hay biểu tượng đẹp mắt, nhưng đủ dùng để tìm một tệp cụ thể hoặc xem nhanh cấu trúc thư mục.

Hầu hết các trình duyệt Chromium Chúng cho phép bạn mở trực tiếp các tệp đa phương tiện và thậm chí cả một số định dạng tài liệu. Chỉ cần nhấp chuột vào chúng. Hình ảnh, video, âm thanh hoặc tệp văn bản thuần túy được hiển thị một cách tự nhiên trong tab.

Mở các tập tin cục bộ trong Chrome và Firefox mà không cần phải nhập thủ công file:///

Ngoài việc nhập các tuyến đường với file:///Trình duyệt bao gồm các phím tắt được thiết kế đặc biệt để nhanh chóng mở các tệp cục bộ. Ví dụ, trong Chrome, bạn có thể sử dụng phím tắt Ctrl + O. (Nhấn tổ hợp phím Ctrl + O) khi cửa sổ trình duyệt đang hoạt động.

Bằng cách nhấn phím tắt đó, Hộp thoại "Mở tập tin" thông thường của hệ điều hành sẽ hiện ra.Chỉ cần tìm tệp bạn muốn, chọn tệp đó và xác nhận. Chrome sẽ tải tệp đó trong tab hiện tại hoặc một tab mới, tùy thuộc vào loại tệp và tùy chọn của bạn.

Firefox cung cấp một số tùy chọn. Một mặt, Bạn có thể vào menu chính và chọn tùy chọn "Mở tập tin...".Thao tác này cũng tương tự: hiển thị cửa sổ chọn tập tin của hệ thống. Ngoài ra, bạn cũng có thể nhập trực tiếp đường dẫn như thế này vào thanh địa chỉ: file:///// để trình duyệt khởi động bằng cách hiển thị nội dung của ổ C: trong Windows.

Với bất kỳ phương pháp nào trong số này, Kết quả thực tế là trình duyệt trở thành một trình xem tập tin cục bộ.Nó có thể giúp bạn khi Windows Explorer Trình duyệt bị treo khi bạn gặp sự cố với trình quản lý tập tin thông thường hoặc đơn giản là khi bạn muốn mở một loại tài liệu mà trình duyệt xử lý đặc biệt tốt.

API truy cập hệ thống tập tin: bước nhảy vọt từ trình xem sang trình chỉnh sửa

Tất cả những gì chúng ta đã thấy cho đến nay đều dựa trên việc sử dụng "thủ công" file:/// và các hộp thoại mở tập tin, tức là những thao tác mà người dùng thực hiện thủ công. Nhưng từ lâu, các trình duyệt dựa trên Chromium đã tích hợp API truy cập hệ thống tệp.Điều này giúp các ứng dụng web có khả năng làm việc với các tệp cục bộ theo cách tiên tiến hơn nhiều.

API này cho phép một trang web, sau khi yêu cầu sự cho phép của bạn, Đọc và lưu các thay đổi trực tiếp vào các tệp và thư mục trên thiết bị của bạn.Nhờ vậy, các trình soạn thảo văn bản và IDE chuyên nghiệp có thể được tạo ra trực tiếp từ trình duyệt. lập trìnhCác trình chỉnh sửa ảnh và video, trình quản lý dự án và nhiều công cụ khác mà trước đây chỉ có ý nghĩa khi phát triển dưới dạng ứng dụng máy tính để bàn.

Điều quan trọng là không được nhầm lẫn API hiện đại này với các API cũ hơn hoặc lỗi thời. Nó không giống với giao diện FileSystem cũng không phải API Mục nhập Tệp và Thư mục hay đặc tả “API Tệp: Thư mục và Hệ thống” cũ., trong đó đề xuất các cơ chế khác để xử lý cấu trúc thư mục và khu vực lưu trữ hộp cát.

API truy cập hệ thống tập tin hiện tại Nó được thiết kế với sự chăm chút đặc biệt về mặt bảo mật, quyền truy cập và trải nghiệm người dùng.Việc mở trình chọn tập tin hoặc thư mục luôn yêu cầu các thao tác rõ ràng (chẳng hạn như nhấp vào nút), và người dùng luôn biết chính xác các đường dẫn mà họ đang cấp quyền truy cập.

Về khả năng tương thích, API này hoạt động trên hầu hết các trình duyệt dựa trên Chromium trên Windows, macOS, Linux, ChromeOS và Android.Một ngoại lệ đáng chú ý là Brave, nơi vẫn cần phải kích hoạt một cờ để sử dụng tính năng này. Các trình duyệt không phải Chromium khác có thể không triển khai tính năng này hoặc chỉ triển khai một phần.

Kiểm tra xem trình duyệt có hỗ trợ API truy cập hệ thống tệp hay không.

Với tư cách là nhà phát triển, điều đầu tiên bạn cần biết là liệu trình duyệt của người dùng có hỗ trợ API này hay không trước khi cố gắng sử dụng nó. Cách đơn giản nhất là kiểm tra xem các phương thức chọn tập tin tương ứng có tồn tại trong đối tượng toàn cục hay không.ví dụ, bằng cách kiểm tra xem showOpenFilePicker có sẵn trong window (o self (trong một người lao động).

Mô hình điển hình thường bao gồm những điều sau: “Nếu 'showOpenFilePicker' được đặt thành self, thì tôi có thể sử dụng API; nếu không, tôi phải dùng đến phương pháp khác.”Điều này cho phép triển khai các giải pháp lai, trong đó, nếu có hỗ trợ, các ưu điểm của API sẽ được tận dụng, còn nếu không có hỗ trợ, các kỹ thuật truyền thống như biểu mẫu tải lên tập tin sẽ được sử dụng.

Đó cũng là một ý kiến ​​hay Kiểm tra trên các trình duyệt mục tiêu và trên các thiết bị khác nhau. hệ điều hànhMặc dù nền tảng là Chromium, nhưng một số nhà sản xuất có thể bật hoặc tắt các tính năng cụ thể vì lý do bảo mật, chính sách hoặc hiệu năng.

Ví dụ đầu tiên: mở một tập tin cục bộ từ một ứng dụng web.

Một trong những ví dụ điển hình để hiểu API này là việc xây dựng một... Một trình soạn thảo văn bản đơn tệp cho phép bạn mở, chỉnh sửa và lưu tài liệu.Nó không cần phải quá xuất sắc: miễn là nó có thể đọc và ghi văn bản thuần túy, điều đó đã minh họa cách thức hoạt động của nó rồi.

Điểm khởi đầu ở đây là phương pháp. window.showOpenFilePicker(). Phương thức này chỉ có thể được gọi trong môi trường bảo mật (HTTPS) và đáp ứng lại cử chỉ của người dùng.Nó hiển thị một hộp thoại gốc để người dùng chọn tệp. Sau khi chọn, nó trả về một mảng các đối tượng xử lý tệp, thường chỉ có một đối tượng duy nhất. FileSystemFileHandle.

Bộ xử lý đó lưu trữ tất cả thông tin và phương thức cần thiết để làm việc với tệp đã chọn. Bạn nên lưu lại tham chiếu đến handle đó, vì sau này bạn sẽ dùng nó để đọc tập tin, lưu thay đổi hoặc thực hiện bất kỳ thao tác nào khác.Miễn là bạn duy trì quyền truy cập đó và người dùng chưa thu hồi quyền, ứng dụng của bạn sẽ có thể tương tác với tệp tin.

Một khi bạn có FileSystemFileHandle, Bạn có thể lấy được vật thể đó. File cuộc gọi thực sự handle.getFile()Đối tượng này File Nó chứa dữ liệu của tệp dưới dạng blob, và bạn có thể truy cập nội dung của nó bằng các phương thức như sau: text(), arrayBuffer(), stream() o slice() Nếu bạn cần truy cập ngẫu nhiên.

Trên thực tế, đối với một trình soạn thảo văn bản đơn giản, Thông thường người ta sẽ sử dụng file.text() để lấy toàn bộ nội dung dưới dạng chuỗivà đưa đoạn văn bản đó vào <textarea> để người dùng có thể chỉnh sửa nó. Điều quan trọng cần lưu ý là đối tượng File Phương thức này sẽ không còn hiệu lực nếu tệp tin bị sửa đổi trên ổ đĩa bằng phương tiện khác, trong trường hợp đó nên gọi lại phương thức này. getFile().

Lưu các thay đổi: ghi vào hệ thống tệp cục bộ

Để lưu lại những chỉnh sửa của người dùng, API cung cấp hai cách thông thường: Một tùy chọn "lưu đơn giản" ghi đè lên tệp gốc và một tùy chọn "lưu thành" tạo tệp mới.Sự khác biệt cơ bản nằm ở chỗ bạn đã có sẵn tham chiếu đến tệp đích hay cần người dùng chọn đường dẫn và tên mới.

Khi bạn muốn tạo một tệp mới hoặc lưu một bản sao với tên khác, bạn nên sử dụng showSaveFilePicker()Phương pháp này mở trình chọn tập tin ở chế độ đã lưu, cho phép người dùng chỉ định tên, thư mục và phần mở rộng. Bạn có thể cung cấp các tùy chọn để đề xuất loại tập tin, ví dụ: cho biết đó là tài liệu văn bản và phần mở rộng ưu tiên là . .txt.

Một chi tiết quan trọng là Bạn nên gọi showSaveFilePicker() trực tiếp đáp lại cử chỉ của người dùng (ví dụ: nhấp vào nút "Lưu") và đừng trì hoãn thao tác này trong khi bạn đang thực hiện các tác vụ xử lý nặng. Nếu bạn thực hiện tất cả các bước chuẩn bị ban đầu rồi mới cố gắng mở hộp thoại sau một thời gian trì hoãn, trình duyệt có thể báo lỗi bảo mật vì nó không còn coi bạn đang "xử lý cử chỉ của người dùng".

Khi bạn đã có FileSystemFileHandle Chỉ định vị trí tệp mà bạn muốn lưu, Bước tiếp theo là tạo ra một FileSystemWritableFileStream sử dụng fileHandle.createWritable()Luồng này là luồng bạn sẽ sử dụng để ghi dữ liệu. Nếu trình duyệt phát hiện bạn chưa có quyền ghi, nó sẽ hiển thị hộp thoại yêu cầu quyền; nếu người dùng từ chối, lệnh gọi sẽ ném ra một ngoại lệ.

Với dòng suối trong tay, Bạn chỉ cần gọi writable.write(contenido) với một chuỗi ký tự, một đối tượng Blob, hoặc một BufferSourceBạn thậm chí có thể trực tiếp truyền nội dung của phản hồi HTTP vào luồng bằng cách sử dụng response.body.pipeTo(writable)Khi bạn gõ xong, bạn đóng hộp thoại bằng writable.close()Đây là thời điểm các thay đổi được hợp nhất trên ổ đĩa.

Trong khi luồng phát đang mở, bạn cũng có thể sử dụng các phương pháp như sau: seek() o truncate() para Di chuyển con trỏ ghi đến một vị trí cụ thể hoặc thay đổi kích thước tệp.Nhưng điều quan trọng cần nhớ là những thay đổi này sẽ không được áp dụng vĩnh viễn cho đến khi luồng phát trực tiếp bị đóng lại.

Đề xuất tên tệp và thư mục chính cho người dùng.

API cũng đảm bảo trải nghiệm người dùng trong các hộp thoại hệ thống. Ví dụ: Bạn có thể chỉ định tên tệp được đề xuất khi gọi hàm này. showSaveFilePicker()Điều này cho phép người dùng nhìn thấy nội dung mô tả chi tiết hơn, chẳng hạn như "New Document.txt," thay vì dòng chữ chung chung "No Title".

Tương tự như vậy, Bạn có thể đề xuất một thư mục ban đầu nơi trình chọn tập tin bắt đầu hoạt động.Việc này được thực hiện bằng cách truyền một thuộc tính. startIn khi bạn gọi showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Các giá trị có thể là chuỗi ký tự như sau: desktop, documents, downloads, music, pictures o videos, tương ứng với các vị trí hệ thống tiêu chuẩn.

Ngoài ra, bạn có tùy chọn sử dụng như một giá trị của startIn một trình quản lý tập tin hoặc thư mục mà bạn đã có sẵnTrong trường hợp đó, hộp thoại sẽ mở trực tiếp trong thư mục chứa handle đó, điều này rất thuận tiện để tiếp tục ngữ cảnh làm việc của phiên cuối cùng.

Nếu ứng dụng của bạn xử lý nhiều loại tệp khác nhau (ví dụ: tài liệu văn bản và hình ảnh nhúng), Bạn có thể định nghĩa các ID khác nhau cho từng loại hộp thoại.Bằng cách này, trình duyệt sẽ ghi nhớ thư mục được sử dụng lần cuối một cách độc lập cho mỗi ID, và bạn sẽ không nhầm lẫn đường dẫn tài liệu với đường dẫn hình ảnh.

Ghi nhớ các tập tin và thư mục gần đây với IndexedDB.

Một trong những ưu điểm của File System Access là các trình xử lý của nó có thể được tuần tự hóa. Điều này có nghĩa là bạn có thể lưu trữ FileSystemFileHandle y FileSystemDirectoryHandle trong IndexedDB và truy xuất chúng trong các phiên tiếp theo, luôn tuân thủ chính sách quyền hạn.

Nhờ vậy, các ứng dụng web có thể cung cấp các chức năng điển hình của máy tính để bàn như: Danh sách các tập tin gần đây, mở lại dự án cuối cùng hoặc khôi phục thư mục làm việc trước đó.Bạn chỉ cần lưu các handle này vào cơ sở dữ liệu của trình duyệt và đọc chúng khi ứng dụng khởi chạy.

Khi bạn truy xuất một tay cầm đã được lưu trữ, Đừng cho rằng các giấy phép đó sẽ vẫn còn hiệu lực.Trình duyệt có thể quyết định rằng cần phải yêu cầu xác thực lại, ví dụ, vì đã hết thời gian hoặc tab cuối cùng từ nguồn đó đã bị đóng. Do đó, bạn nên kiểm tra tình huống này trong mã của mình.

Đối với lần kiểm tra này, API bao gồm các phương thức queryPermission() y requestPermission() cả trong trình xử lý tệp và thư mụcĐầu tiên, bạn hỏi trạng thái của quyền là gì, và nếu quyền đó chưa được "cấp", bạn có thể yêu cầu lại từ người dùng, chỉ rõ trong phần tùy chọn xem bạn cần quyền chỉ đọc hay quyền đọc và ghi.

Một thực hành tốt là Kết hợp cả hai bước thành một chức năng trợ giúp duy nhất Với một handle và một chế độ (chỉ đọc hoặc đọc/ghi), chương trình sẽ kiểm tra xem quyền đã được cấp hay chưa, và nếu chưa, sẽ hiển thị lời nhắc tương ứng. Điều này giúp giảm số lượng hộp thoại và làm cho trải nghiệm mượt mà hơn.

Mở và duyệt toàn bộ thư mục từ trình duyệt

Ngoài các tệp riêng lẻ, API này còn cho phép làm việc với toàn bộ thư mục. với showDirectoryPicker() Người dùng có thể chọn toàn bộ thư mục.và ứng dụng nhận được FileSystemDirectoryHandle Điều này cho phép truy cập vào tất cả các thành phần của nó.

Theo mặc định, bạn sẽ có quyền đọc các tệp trong thư mục đó, mặc dù nếu bạn cần, bạn cũng có quyền ghi vào chúng. Bạn có thể yêu cầu quyền truy cập đọc và ghi bằng cách truyền vào. { mode: 'readwrite' } khi gọi showDirectoryPicker()Kể từ thời điểm đó, ứng dụng của bạn có thể liệt kê và thao tác nội dung theo quyền được cấp.

Để điều hướng trong thư mục, Bạn có thể lặp lại bất đồng bộ. dirHandle.values()Hàm này trả về từng phần tử một, bao gồm các tệp và thư mục con. Mỗi mục đều có một thuộc tính. kind điều này cho bạn biết liệu đó có phải là một "file" hoặc một "directory".

Nếu bạn cần truy cập thông tin về từng tệp, chẳng hạn như kích thước của nó, bạn có thể gọi entry.getFile(). Trong những trường hợp này, nên tiến hành đo song song bằng cách sử dụng Promise.all() hoặc các kỹ thuật tương tựThay vì thực hiện từng bước một theo trình tự nghiêm ngặt, điều này có thể làm chậm hơn.

Bạn cũng có thể thực hiện việc này từ một thư mục. Tạo thư mục hoặc tệp mới với getDirectoryHandle() y getFileHandle()Bạn có thể chỉ định trong phần tùy chọn xem bạn có muốn tạo các thư mục đó nếu chúng chưa tồn tại hay không. Ví dụ, bạn có thể thiết lập cấu trúc dự án như "Dự án của tôi / Mã nguồn / Ghi chú.txt" trực tiếp từ ứng dụng web.

Quản lý tập tin: xóa, đổi tên và di chuyển

API không chỉ giới hạn ở việc đọc và ghi. Nó cũng cho phép bạn xóa các tệp và thư mục khỏi một thư mục bằng cách sử dụng removeEntry() qua một FileSystemDirectoryHandleNếu đó là một thư mục, bạn có thể thiết lập xóa đệ quy, bao gồm tất cả các thư mục con và tệp bên trong nó.

Nếu thay vì duyệt qua toàn bộ thư mục, bạn muốn thao tác trực tiếp với một tệp hoặc thư mục cụ thể, Một số trình duyệt cung cấp phương pháp này. remove() en FileSystemFileHandle y FileSystemDirectoryHandleBằng cách này, bạn có thể xóa phần tử đó mà không cần phải tham chiếu đến tên của nó trong thư mục cha.

Đối với các thao tác sắp xếp như đổi tên hoặc di chuyển các mục sang thư mục khác, Có một phương pháp move() trong giao diện FileSystemHandleBạn có thể trực tiếp truyền vào tên mới, thư mục đích hoặc cả thư mục và tên mới để di chuyển và đổi tên cùng lúc.

Tuy nhiên, vấn đề tương thích cũng cần có những điểm tinh tế: sự hỗ trợ của move() Nó hoạt động ổn định hơn đối với các tập tin nằm trong hệ thống tập tin riêng tư nguồn (OPFS).và có thể vẫn còn bị hạn chế bởi các cờ lệnh hoặc chưa được triển khai cho tất cả các trường hợp hoặc cho các thư mục trong một số trình duyệt nhất định.

Kéo và thả tệp và thư mục lên web

API truy cập hệ thống tập tin tích hợp rất tốt với hệ thống kéo thả của HTML. Khi người dùng kéo thả các tập tin hoặc thư mục từ hệ điều hành vào một trang web.Trình duyệt tạo ra các phần tử DataTransferItem cộng sự.

Thông qua phương pháp DataTransferItem.getAsFileSystemHandle(), bạn có thể nhận được FileSystemFileHandle cho dù phần tử đó là một tập tin hay một FileSystemDirectoryHandle nếu đó là một thư mụcNhư vậy, một ứng dụng có thể cho phép người dùng kéo và thả toàn bộ thư mục ảnh và làm việc trực tiếp với nội dung của thư mục đó.

Bạn nên nhớ rằng, trong ngữ cảnh của thao tác kéo và thả, DataTransferItem.kind "File" sẽ luôn được sử dụng cho cả tập tin và thư mục.Bạn sẽ phân biệt được giữa tập tin và thư mục bằng cách tham khảo thuộc tính. kind các FileSystemHandle điều đó mang lại cho bạn getAsFileSystemHandle()điều này sẽ tạo nên sự khác biệt giữa "file" y "directory".

Hệ thống tập tin nguồn riêng (OPFS) và truy cập được tối ưu hóa

Ngoài quyền truy cập vào các tệp và thư mục của người dùng, trình duyệt Chromium còn cung cấp một số tính năng khác. hệ thống tệp riêng gốc (OPFS)Đây là không gian lưu trữ dành riêng cho mỗi trang web, người dùng không thể truy cập trực tiếp từ hệ điều hành.

Trong thực tế, điều này có nghĩa là Mặc dù trình duyệt lưu trữ dữ liệu này trên ổ đĩa, người dùng sẽ không tìm thấy nó dưới dạng các tệp "thông thường" trong bất kỳ thư mục nào.Đây có thể là cơ sở dữ liệu, các tập tin được đóng gói hoặc bất kỳ cấu trúc nội bộ nào mà trình duyệt cho là phù hợp.

Từ API, bạn có thể truy cập vào thư mục gốc của hệ thống riêng tư này bằng cách sử dụng navigator.storage.getDirectory(), trả về một FileSystemDirectoryHandle. Từ đó, bạn có thể tạo tệp và thư mục, đọc chúng, ghi vào chúng, đổi tên hoặc xóa chúng như thể chúng là các phần tử của hệ thống tệp cục bộ.Nhưng cần biết rằng chúng được cách ly và chỉ dành riêng cho ứng dụng web của bạn.

Đối với các nhu cầu hiệu năng cao hơn, Chromium tích hợp một loại tệp đặc biệt với khả năng truy cập đồng bộ được tối ưu hóa.. Thông qua fileHandle.createSyncAccessHandle() (Có sẵn trong các worker), bạn có thể nhận được một handle cho phép đọc và ghi đồng bộ và độc quyền, điều này hữu ích cho các trường hợp sử dụng rất chuyên sâu hoặc nhạy cảm với độ trễ.

Việc lấy handle vẫn diễn ra bất đồng bộ, nhưng một khi bạn đã có được nó, Các thao tác đọc và ghi được thực hiện dưới dạng các lệnh gọi trực tiếp, thao tác với các bộ đệm byte.Điều này mang lại hiệu năng gần như tương đương với một ứng dụng gốc, nhưng không cần rời khỏi môi trường web và vẫn duy trì được sự cô lập khỏi hệ thống nguồn riêng.

Các polyfill và giải pháp thay thế khi không có hỗ trợ gốc.

Mặc dù API truy cập hệ thống tệp cung cấp nhiều khả năng, Chưa phải tất cả trình duyệt đều hỗ trợ tính năng này.Không thể tạo ra một polyfill hoàn chỉnh sao chép tất cả các khả năng của nó, chủ yếu là vì không có cách nào mô phỏng một cách đáng tin cậy việc truy cập hệ thống tập tin gốc mà không có sự hợp tác của chính trình duyệt.

Tuy nhiên, một số phần có thể được ước lượng gần đúng. Để mô phỏng showOpenFilePicker() một cách đơn giản <input type="file">, hiển thị hộp chọn tập tin và cho phép người dùng chọn một hoặc nhiều tập tin.

Điều tương tự cũng xảy ra với việc tiết kiệm. Để bắt chước showSaveFilePicker() một liên kết thường được sử dụng <a download="nombre"> Nhấp chuột vào đó sẽ bắt đầu quá trình tải xuống một Blob được tạo từ JavaScript. Điều này cho phép bạn "lưu" dữ liệu được tạo bởi trang web, mặc dù nó không cung cấp tùy chọn ghi đè lên các tệp hiện có.

Về việc chọn toàn bộ thư mục, thuộc tính không chuẩn đã được sử dụng theo truyền thống. webkitdirectory en <input type="file">Công cụ này cho phép bạn chọn một thư mục và nhận danh sách các tệp tin có trong đó. Tuy nhiên, nó không phải là giải pháp toàn diện và cũng không mạnh mẽ bằng một công cụ khác. showDirectoryPicker()Nhưng nó bao gồm một số trường hợp.

Để thống nhất các phương pháp này, Có những hiệu sách như... truy cập hệ thống tệp trình duyệt Họ cố gắng sử dụng API hiện đại bất cứ khi nào có sẵn, và nếu không, họ sẽ tự động chuyển sang các giải pháp thay thế tốt hơn này.Theo cách này, nhà phát triển viết mã tương đối đồng nhất và thư viện sẽ tự động điều chỉnh cho phù hợp với môi trường.

Bảo mật, quyền và kiểm soát của người dùng

Tất cả quyền lực này đều đi kèm với trách nhiệm, và các nhóm phát triển trình duyệt đều nhận thức rất rõ điều này. Thiết kế của API truy cập hệ thống tập tin xoay quanh hai nguyên tắc: quyền kiểm soát của người dùng và tính minh bạch.Không có cách nào một trang web có thể bí mật đọc được một nửa ổ cứng.

Khi người dùng mở một tập tin bằng cách sử dụng các hộp chọn (để đọc hoặc để lưu một tập tin mới), Chính cử chỉ đó cấp quyền đọc hoặc ghi vào tệp hoặc thư mục cụ thể.Nếu người dùng thay đổi ý định và hủy bỏ cuộc đối thoại, trang web sẽ không nhận được gì và do đó không có được bất kỳ quyền truy cập nào.

Để lưu tệp mới, hãy nhấp vào ô “Lưu”. Chức năng này không chỉ cho phép bạn chọn tên và đường dẫn mà còn cấp quyền ghi cho tập tin mới tạo đó.Nguyên lý hoạt động tương tự như nguyên lý đã được sử dụng trong nhiều năm qua ở các yếu tố như... <input type="file">nhưng được mở rộng với nhiều chức năng hơn.

Khi một ứng dụng web muốn sửa đổi một tệp tin đã tồn tại, Trình duyệt không thể tự ý thực hiện việc đó; nó có thể hiển thị một thông báo cụ thể yêu cầu quyền ghi dữ liệu vào trình duyệt.Hộp thoại này chỉ có thể được mở khi người dùng thực hiện một thao tác, chẳng hạn như nhấn nút "Lưu thay đổi".

Nếu người dùng quyết định không cấp quyền ghi đó, Trang web phải cung cấp một số phương án thay thế: tải xuống bản sao, lưu vào đám mây, làm việc trong OPFS hoặc một cơ chế tương tự khác.Ý tưởng là người dùng luôn có quyền quyết định cuối cùng về những gì được thay đổi trên hệ thống cục bộ của họ.

Về mặt tính minh bạch, Trình duyệt hiển thị một biểu tượng trên thanh địa chỉ khi một trang web có quyền truy cập vào các tệp cục bộ.Nếu người dùng nhấp vào biểu tượng đó, họ sẽ thấy danh sách các tệp hoặc thư mục mà trang đó có quyền truy cập tại thời điểm đó và có thể thu hồi quyền bất cứ khi nào họ muốn.

Giấy phép không có hiệu lực vĩnh viễn. Thông thường, một trang chỉ duy trì khả năng tiếp tục lưu tập tin miễn là ít nhất một tab từ nguồn đó vẫn đang mở.Khi tất cả các cửa sổ đó được đóng, trình duyệt có thể coi rằng phiên làm việc đã kết thúc và, trong lần sử dụng tiếp theo, sẽ cần phải yêu cầu quyền truy cập lại vào các tệp hoặc thư mục đó.

Kết hợp lược đồ file:/// để mở các tài nguyên cụ thể, phím tắt để tải lên các tệp cục bộ và API truy cập hệ thống tệp để tích hợp sâu. Điều này giúp trình duyệt trở thành một công cụ đa năng hơn nhiều cho cả người dùng và nhà phát triển.Cho phép bạn nhanh chóng xem video đã lưu trên ổ đĩa hoặc chỉnh sửa toàn bộ dự án mà không cần rời khỏi môi trường web.