Πώς να ανοίξετε τοπικά αρχεία στο πρόγραμμα περιήγησης με το file:///

Η χρήση του προγράμματος περιήγησης σαν να ήταν ένας μικρός εξερευνητής αρχείων είναι δυνατή και, αν χρησιμοποιηθεί σωστά, μπορεί να είναι εξαιρετικά χρήσιμη. Από το άνοιγμα ενός απλού τοπικού εγγράφου με το file:/// έως την εργασία με το ισχυρό API Πρόσβασης σε Σύστημα ΑρχείωνΣτις μέρες μας, τα σύγχρονα προγράμματα περιήγησης προσφέρουν πολύ περισσότερες δυνατότητες από ό,τι συνήθως χρησιμοποιούμε.

Σε όλο αυτόν τον οδηγό θα δούμε, βήμα προς βήμα, πώς να ανοίξετε τοπικά αρχεία στο web browser χρησιμοποιώντας το file:/// σε Chrome, Edge και FirefoxΠώς να μετατρέψετε το πρόγραμμα περιήγησής σας σε έναν βασικό εξερευνητή αρχείων σε Windows και Android και πώς οι προγραμματιστές μπορούν να προχωρήσουν ένα βήμα παραπέρα χρησιμοποιώντας το File System Access API για να διαβάζουν, να γράφουν και να διαχειρίζονται τοπικά αρχεία και φακέλους από μια διαδικτυακή εφαρμογή.

Τι σημαίνει πραγματικά το άνοιγμα τοπικών αρχείων με το file:///;

Όταν γράφετε μια διαδρομή που ξεκινά με file:/// στη γραμμή διευθύνσεων του προγράμματος περιήγησης, Λέτε στο πρόγραμμα περιήγησης να έχει πρόσβαση στο τοπικό σύστημα αρχείων αντί για το διαδίκτυο.Δηλαδή, για να ανοίξετε κάτι που βρίσκεται στη δική σας συσκευή: έναν σκληρό δίσκο, μια εσωτερική μνήμη ή μια κάρτα SD.

Αυτό το ειδικό σχήμα URL (file:///) Λειτουργεί παρόμοια με την πληκτρολόγηση C: στα Windows ή / στα Linux και macOSΑπλώς είναι προσαρμοσμένο στη λογική του προγράμματος περιήγησης. Από εκεί και πέρα, αυτό που θα δείτε είναι ένα είδος λίστας φακέλων και αρχείων, χωρίς καμία επιπλοκή: ονόματα, μεγέθη, ημερομηνία τροποποίησης και τίποτα άλλο.

Φυσικά, πρέπει να έχουμε κατά νου ότι Τα προγράμματα περιήγησης αντιμετωπίζουν αυτές τις τοπικές διαδρομές με πολλούς περιορισμούς ασφαλείας.Για παράδειγμα, ένας ιστότοπος που επισκέπτεστε από το διαδίκτυο δεν μπορεί, από προεπιλογή, να διαβάσει ελεύθερα τα τοπικά σας αρχεία μόνο και μόνο επειδή ανοίγετε μια διεύθυνση URL με file:///Απαιτείται πάντα μια ρητή χειρονομία ή άδεια από τον χρήστη.

Χρήση του προγράμματος περιήγησης ως εξερευνητή αρχείων σε Android

Πολλά τηλέφωνα Android δεν περιλαμβάνουν έναν αξιοπρεπή διαχειριστή αρχείων από τον κατασκευαστή ή αυτός που είναι προεγκατεστημένος είναι μάλλον περιορισμένος. Σε αυτές τις περιπτώσεις, Η χρήση του Chrome, του Edge ή άλλου προγράμματος περιήγησης που βασίζεται στο Chromium ως αυτοσχέδιου προγράμματος περιήγησης μπορεί να σας γλιτώσει από ένα δύσκολο έργο..

Το κόλπο είναι πολύ απλό: Ανοίξτε το πρόγραμμα περιήγησης που βασίζεται στο Chromium (Chrome, Edge, Brave, κ.λπ.) και πληκτρολογήστε στη γραμμή διευθύνσεων αρχείο: /// sdcard /Το Android αναγνωρίζει το αποθήκευση κύριο εσωτερικό ως sdcard, με πολύ παρόμοιο τρόπο με τον οποίο τα Windows χρησιμοποιούν το C: για την κύρια μονάδα δίσκου.

Όταν εκκινείτε αυτήν τη διεύθυνση, το πρόγραμμα περιήγησης συνήθως θα ζητήσει άδεια για την ανάγνωση του εσωτερικού χώρου αποθήκευσης. Μόλις παραχωρήσετε αυτήν την άδεια, θα εμφανιστεί ένα ευρετήριο που θα εμφανίζει τους ριζικούς φακέλους της εσωτερικής μνήμης σας.Από εκεί μπορείτε να εισάγετε και να βγείτε από φακέλους ακριβώς σαν να περιηγείστε σε έναν ιστότοπο με συνδέσμους.

Σε κάθε φάκελο θα δείτε τόσο υποφακέλους όσο και αρχεία. Τα αρχεία εμφανίζονται με το πλήρες όνομά τους, συμπεριλαμβανομένης της επέκτασης, του μεγέθους τους και της ημερομηνίας τελευταίας τροποποίησης.Αναφέρονται επίσης τα ακόλουθα: κρυμμένοι φάκελοι, τα οποία στο Android συνήθως ξεκινούν με τελεία, όπως .nomedia ή άλλα παρόμοια.

Αν και η λίστα είναι πολύ λιτή, Τα περισσότερα σύγχρονα προγράμματα περιήγησης μπορούν να ανοίξουν απευθείας πολλούς τύπους αρχείων πατώντας τα.Εικόνες, βίντεο, ήχος, έγγραφα κειμένου κ.λπ. Δεν υπάρχουν μικρογραφίες ή προεπισκοπήσεις, αλλά απλώς κάνοντας κλικ στο όνομα του αρχείου θα γίνει προσπάθεια από το πρόγραμμα περιήγησης να το εμφανίσει ή να το αναπαράγει.

Μετατρέψτε το Chrome και το Edge σε έναν μικρό εξερευνητή αρχείων στον υπολογιστή σας

Σε επιτραπέζιους υπολογιστές, τόσο σε Windows όσο και σε άλλα συστήματα, Μπορείτε επίσης να χρησιμοποιήσετε το Chrome, το Edge και άλλα προγράμματα περιήγησης που βασίζονται στο Chromium για να πλοηγηθείτε στις τοπικές μονάδες δίσκου σας με το file:///Η αρχή είναι η ίδια με αυτή του Android, αλλά η διαδρομή είναι διαφορετική.

Εάν χρησιμοποιείτε Windows, η κύρια μονάδα δίσκου είναι συνήθως η C:. Σε αυτήν την περίπτωση, πληκτρολογήστε στη γραμμή διευθύνσεων αρχείο:///C: και πατήστε EnterΤο πρόγραμμα περιήγησης θα σας δείξει τα περιεχόμενα της ρίζας αυτής της μονάδας δίσκου: φακέλους όπως Windows, Program Files, UsuariosΚ.λπ.

Αν έχετε περισσότερες μονάδες δίσκου ή διαμερίσματα, Μπορείτε να αντικαταστήσετε το γράμμα στη διεύθυνση URL με το αντίστοιχο.. Για παράδειγμα, file:///D: για ένα άλλο άλμπουμ ή file:///E: για μια ανάμνηση USB ότι είχε μονταριστεί με αυτό το γράμμα. Από εκεί, κάντε κλικ στους φακέλους για να προχωρήσετε προς τα εμπρός και χρησιμοποιήστε το κουμπί "πίσω" του προγράμματος περιήγησης για να επιστρέψετε.

Ακριβώς όπως στο Android, Σε κάθε φάκελο θα δείτε αρχεία και υποφακέλους με ορατό μέγεθος, ημερομηνία τροποποίησης και επέκτασηΔεν δημιουργεί μικρογραφίες ή όμορφα εικονίδια, αλλά αρκεί για να εντοπίσετε ένα συγκεκριμένο αρχείο ή να ρίξετε μια γρήγορη ματιά σε μια δομή καταλόγου.

Τα περισσότερα προγράμματα περιήγησης Chromium Σας επιτρέπουν να ανοίγετε απευθείας αρχεία πολυμέσων, ακόμη και ορισμένες μορφές εγγράφων. Απλώς κάνοντας κλικ πάνω τους. Εικόνες, βίντεο, ήχος ή αρχεία απλού κειμένου εμφανίζονται με φυσικότητα μέσα στην καρτέλα.

Άνοιγμα τοπικών αρχείων στο Chrome και τον Firefox χωρίς να πληκτρολογήσετε χειροκίνητα το file:///

Εκτός από την πληκτρολόγηση διαδρομών με file:///Τα προγράμματα περιήγησης περιλαμβάνουν συντομεύσεις που έχουν σχεδιαστεί ειδικά για το γρήγορο άνοιγμα τοπικών αρχείων. Στο Chrome, για παράδειγμα, μπορείτε να χρησιμοποιήσετε τη συντόμευση πληκτρολογίου Ctrl + O (Control + O) όταν το παράθυρο του προγράμματος περιήγησης είναι ενεργό.

Πατώντας αυτήν τη συντόμευση, Ανοίγει το τυπικό παράθυρο διαλόγου "Άνοιγμα αρχείου" του λειτουργικού συστήματοςΑπλώς βρείτε το αρχείο που θέλετε, επιλέξτε το και επιβεβαιώστε. Το Chrome θα το φορτώσει στην τρέχουσα καρτέλα ή σε μια νέα, ανάλογα με τον τύπο αρχείου και τις προτιμήσεις σας.

Ο Firefox προσφέρει αρκετές επιλογές. Από τη μία πλευρά, Μπορείτε να μεταβείτε στο κύριο μενού και να επιλέξετε την επιλογή "Άνοιγμα αρχείου..."το οποίο κάνει ακριβώς το ίδιο πράγμα: εμφανίζει το παράθυρο επιλογής αρχείων του συστήματος. Εναλλακτικά, μπορείτε να πληκτρολογήσετε απευθείας μια διαδρομή όπως αυτή στη γραμμή διευθύνσεων: file:///// έτσι ώστε το πρόγραμμα περιήγησης να ξεκινά εμφανίζοντας τα περιεχόμενα της μονάδας δίσκου C: στα Windows.

Με οποιαδήποτε από αυτές τις μεθόδους, Το πρακτικό αποτέλεσμα είναι ότι το πρόγραμμα περιήγησης γίνεται ένα τοπικό πρόγραμμα προβολής αρχείων.Μπορεί να σας βοηθήσει όταν το Windows Explorer Παγώνει όταν έχετε προβλήματα με τον συνηθισμένο διαχειριστή αρχείων ή απλώς όταν θέλετε να ανοίξετε έναν τύπο εγγράφου που το πρόγραμμα περιήγησης χειρίζεται ιδιαίτερα καλά.

Το API Πρόσβασης σε Σύστημα Αρχείων: το άλμα από τον προβολέα στον επεξεργαστή

Όλα όσα έχουμε δει μέχρι στιγμής βασίζονται στη «χειροκίνητη» χρήση του file:/// και των παραθύρων διαλόγου ανοίγματος αρχείου, δηλαδή σε πράγματα που ο χρήστης κάνει χειροκίνητα. Αλλά εδώ και αρκετό καιρό, τα προγράμματα περιήγησης που βασίζονται στο Chromium έχουν ενσωματώσει το File System Access API., το οποίο δίνει στις διαδικτυακές εφαρμογές τη δυνατότητα να εργάζονται με τοπικά αρχεία με πολύ πιο προηγμένο τρόπο.

Αυτό το API επιτρέπει σε έναν ιστότοπο, αφού ζητήσετε την άδειά σας, Διαβάστε και αποθηκεύστε τις αλλαγές απευθείας σε αρχεία και φακέλους στη συσκευή σαςΧάρη σε αυτό, μπορούν να δημιουργηθούν σοβαροί επεξεργαστές κειμένου και IDE απευθείας από το πρόγραμμα περιήγησης. προγραμματισμού, προγράμματα επεξεργασίας φωτογραφιών και βίντεο, διαχειριστές έργων και πολλά άλλα εργαλεία που προηγουμένως είχαν νόημα να αναπτυχθούν μόνο ως εφαρμογές για επιτραπέζιους υπολογιστές.

Είναι σημαντικό να μην συγχέετε αυτό το σύγχρονο API με παλαιότερα ή παρωχημένα. Δεν είναι το ίδιο με τη διεπαφή FileSystem ούτε το API καταχωρίσεων αρχείων και καταλόγων ούτε η παλιά προδιαγραφή "File API: Κατάλογοι και Σύστημα", το οποίο πρότεινε άλλους μηχανισμούς για τον χειρισμό ιεραρχιών αρχείων και περιοχών αποθήκευσης sandbox.

Το τρέχον API πρόσβασης συστήματος αρχείων Έχει σχεδιαστεί με ιδιαίτερη προσοχή όσον αφορά την ασφάλεια, τα δικαιώματα και την εμπειρία χρήστη.Απαιτούνται πάντα σαφείς ενέργειες (όπως το κλικ σε ένα κουμπί) για να ανοίξει ο επιλογέας αρχείου ή καταλόγου και ο χρήστης είναι πάντα σαφής σχετικά με τις ακριβείς διαδρομές στις οποίες παραχωρεί πρόσβαση.

Όσον αφορά τη συμβατότητα, Το API λειτουργεί στα περισσότερα προγράμματα περιήγησης που βασίζονται στο Chromium σε Windows, macOS, Linux, ChromeOS και Android.Μια αξιοσημείωτη εξαίρεση είναι το Brave, όπου εξακολουθεί να είναι απαραίτητο να ενεργοποιήσετε μια σημαία για να τη χρησιμοποιήσετε. Άλλα προγράμματα περιήγησης εκτός Chromium ενδέχεται να μην την εφαρμόζουν ή να την εφαρμόζουν μόνο εν μέρει.

Ελέγξτε εάν το πρόγραμμα περιήγησης υποστηρίζει το API πρόσβασης συστήματος αρχείων

Ως προγραμματιστής, το πρώτο πράγμα που θέλετε να μάθετε είναι εάν το πρόγραμμα περιήγησης του χρήστη υποστηρίζει αυτό το API πριν επιχειρήσετε να το χρησιμοποιήσετε. Ο απλούστερος τρόπος είναι να ελέγξετε αν υπάρχουν οι αντίστοιχες μέθοδοι επιλογής αρχείων στο καθολικό αντικείμενο.για παράδειγμα, ελέγχοντας αν showOpenFilePicker είναι διαθέσιμο σε window (o self σε έναν εργάτη).

Το τυπικό μοτίβο αποτελείται από κάτι σαν αυτό: «Εάν το 'showOpenFilePicker' έχει οριστεί σε self, τότε μπορώ να χρησιμοποιήσω το API. Διαφορετικά, πρέπει να καταφύγω σε μια εναλλακτική μέθοδο.»Αυτό επιτρέπει την υλοποίηση υβριδικών λύσεων όπου, εάν υπάρχει υποστήριξη, αξιοποιούνται τα πλεονεκτήματα του API και, εάν δεν υπάρχει υποστήριξη, χρησιμοποιούνται παραδοσιακές τεχνικές όπως οι φόρμες μεταφόρτωσης αρχείων.

Είναι επίσης μια καλή ιδέα Δοκιμή στα προγράμματα περιήγησης-στόχους και σε διαφορετικά OSΕπειδή παρόλο που η βάση είναι το Chromium, ορισμένοι κατασκευαστές ενδέχεται να ενεργοποιούν ή να απενεργοποιούν συγκεκριμένες λειτουργίες για λόγους ασφάλειας, πολιτικής ή απόδοσης.

Πρώτο παράδειγμα: άνοιγμα τοπικού αρχείου από μια εφαρμογή ιστού

Ένα από τα κανονικά παραδείγματα για την κατανόηση αυτού του API είναι η δημιουργία ενός ένα πρόγραμμα επεξεργασίας κειμένου ενός αρχείου που σας επιτρέπει να ανοίγετε, να τροποποιείτε και να αποθηκεύετε ένα έγγραφοΔεν χρειάζεται να είναι εντυπωσιακό: αρκεί να διαβάζει και να γράφει απλό κείμενο, ήδη δείχνει πώς λειτουργεί.

Το σημείο εισόδου εδώ είναι η μέθοδος window.showOpenFilePicker(). Αυτή η μέθοδος, η οποία μπορεί να κληθεί μόνο σε ασφαλές περιβάλλον (HTTPS) και ως απόκριση σε μια χειρονομία χρήστηΕμφανίζει ένα εγγενές παράθυρο διαλόγου για τον χρήστη ώστε να επιλέξει ένα αρχείο. Μόλις επιλεγεί, επιστρέφει έναν πίνακα λαβών, συνήθως με μία μόνο FileSystemFileHandle.

Αυτή η λαβή αποθηκεύει όλες τις πληροφορίες και τις μεθόδους που είναι απαραίτητες για την εργασία με το επιλεγμένο αρχείο. Είναι καλή ιδέα να αποθηκεύσετε μια αναφορά στη λαβή, επειδή αυτή θα χρησιμοποιήσετε αργότερα για να διαβάσετε το αρχείο, να αποθηκεύσετε αλλαγές ή να εκτελέσετε οποιαδήποτε άλλη λειτουργία.Εφόσον διατηρείτε αυτήν την λαβή και ο χρήστης δεν έχει ανακαλέσει τα δικαιώματα, η εφαρμογή σας θα μπορεί να αλληλεπιδράσει με το αρχείο.

Μόλις έχετε το FileSystemFileHandle, μπορείτε να αποκτήσετε το αντικείμενο File πραγματικό κάλεσμα handle.getFile()Αυτό το αντικείμενο File Περιέχει τα δεδομένα του αρχείου ως blob και μπορείτε να αποκτήσετε πρόσβαση στα περιεχόμενά του χρησιμοποιώντας μεθόδους όπως text(), arrayBuffer(), stream() o slice() αν χρειάζεστε τυχαία πρόσβαση.

Στην πράξη, για έναν απλό επεξεργαστή κειμένου, το συνηθισμένο είναι να χρησιμοποιείτε file.text() για να λάβετε το πλήρες περιεχόμενο ως συμβολοσειράκαι βάλτε αυτό το κείμενο σε ένα <textarea> ώστε ο χρήστης να μπορεί να το επεξεργαστεί. Είναι σημαντικό να σημειωθεί ότι το αντικείμενο File Παύει να ισχύει εάν το αρχείο τροποποιηθεί στον δίσκο με άλλο τρόπο, οπότε συνιστάται να το καλέσετε ξανά. getFile().

Αποθήκευση αλλαγών: εγγραφή στο τοπικό σύστημα αρχείων

Για να αποθηκεύσει ό,τι έχει επεξεργαστεί ο χρήστης, το API προσφέρει δύο τυπικές διαδρομές: μια «απλή» αποθήκευση που αντικαθιστά το αρχικό αρχείο και μια «Αποθήκευση ως» που δημιουργεί ένα νέο αρχείοΗ θεμελιώδης διαφορά είναι αν έχετε ήδη έναν δείκτη χειρισμού για το αρχείο προορισμού ή αν χρειάζεστε ο χρήστης να επιλέξει μια νέα διαδρομή και όνομα.

Όταν θέλετε να δημιουργήσετε ένα νέο αρχείο ή να αποθηκεύσετε ένα αντίγραφο με διαφορετικό όνομα, πρέπει να χρησιμοποιήσετε showSaveFilePicker()Αυτή η μέθοδος ανοίγει τον επιλογέα αρχείων σε αποθηκευμένη λειτουργία, επιτρέποντας στον χρήστη να καθορίσει το όνομα, τον φάκελο και την επέκταση. Μπορείτε να παρέχετε επιλογές για να προτείνετε τύπους αρχείων, για παράδειγμα, υποδεικνύοντας ότι πρόκειται για έγγραφο κειμένου και ότι η προτιμώμενη επέκταση είναι . .txt.

Μια σημαντική λεπτομέρεια είναι αυτό Θα πρέπει να καλέσεις showSaveFilePicker() άμεσα ως απάντηση στην χειρονομία του χρήστη (για παράδειγμα, κάνοντας κλικ στο κουμπί "Αποθήκευση") και μην το καθυστερείτε όσο εκτελείτε βαριά επεξεργασία. Εάν κάνετε όλη την προκαταρκτική εργασία και στη συνέχεια, με καθυστέρηση, προσπαθήσετε να ανοίξετε το παράθυρο διαλόγου, το πρόγραμμα περιήγησης ενδέχεται να εμφανίσει ένα σφάλμα ασφαλείας επειδή δεν θεωρεί πλέον ότι "χειρίζεστε μια χειρονομία χρήστη".

Μόλις έχετε ένα FileSystemFileHandle δείχνοντας το αρχείο όπου θέλετε να αποθηκεύσετε, Το επόμενο βήμα είναι να δημιουργήσετε ένα FileSystemWritableFileStream χρησιμοποιώντας fileHandle.createWritable()Αυτή η ροή είναι αυτή που θα χρησιμοποιήσετε για την εγγραφή των δεδομένων. Εάν το πρόγραμμα περιήγησης εντοπίσει ότι δεν έχετε ακόμη δικαίωμα εγγραφής, θα εμφανίσει ένα παράθυρο διαλόγου δικαιωμάτων. Εάν ο χρήστης το αρνηθεί, η κλήση θα δημιουργήσει μια εξαίρεση.

Με το ρυάκι στο χέρι, Απλώς καλείς writable.write(contenido) με μια συμβολοσειρά, ένα Blob ή ένα BufferSourceΜπορείτε ακόμη και να μεταφέρετε απευθείας το σώμα μιας απόκρισης HTTP στη ροή με response.body.pipeTo(writable)Όταν ολοκληρώσετε την πληκτρολόγηση, κλείνετε την αποστολή με writable.close(), η οποία είναι η στιγμή που οι αλλαγές ενοποιούνται στο δίσκο.

Ενώ η ροή είναι ανοιχτή, μπορείτε επίσης να χρησιμοποιήσετε μεθόδους όπως seek() o truncate() για μετακινήστε τον δείκτη εγγραφής σε μια συγκεκριμένη θέση ή αλλάξτε το μέγεθος του αρχείουΑλλά είναι σημαντικό να θυμάστε ότι οι αλλαγές δεν εφαρμόζονται μόνιμα μέχρι να κλείσει η ροή.

Πρόταση ονόματος αρχείου και αρχικού φακέλου στον χρήστη

Το API φροντίζει επίσης για την εμπειρία χρήστη στα παράθυρα διαλόγου του συστήματος. Για παράδειγμα, Μπορείτε να καθορίσετε ένα προτεινόμενο όνομα αρχείου όταν καλείτε showSaveFilePicker()Αυτό επιτρέπει στον χρήστη να δει κάτι πιο περιγραφικό, όπως "Νέο έγγραφο.txt", αντί για ένα γενικό "Χωρίς τίτλο".

Ομοίως, Είναι δυνατό να προταθεί ένας αρχικός φάκελος από τον οποίο θα ξεκινήσει ο επιλογέας αρχείων.Αυτό γίνεται με τη μεταβίβαση μιας ιδιότητας startIn όταν καλείς showSaveFilePicker(), showOpenFilePicker() o showDirectoryPicker()Οι τιμές μπορούν να είναι συμβολοσειρές όπως desktop, documents, downloads, music, pictures o videos, τα οποία αντιστοιχούν σε τυπικές τοποθεσίες συστήματος.

Επιπλέον, έχετε την επιλογή να χρήση ως τιμή του startIn έναν διαχειριστή αρχείων ή καταλόγων που ήδη διαθέτετεΣε αυτήν την περίπτωση, το παράθυρο διαλόγου ανοίγει απευθείας στον φάκελο όπου βρίσκεται αυτός ο δείκτης χειρισμού, κάτι που είναι πολύ βολικό για την επαναφορά του λειτουργικού περιβάλλοντος της τελευταίας συνεδρίας.

Εάν η εφαρμογή σας χειρίζεται διαφορετικούς τύπους αρχείων (για παράδειγμα, έγγραφα κειμένου και ενσωματωμένες εικόνες), Μπορείτε να ορίσετε διαφορετικά αναγνωριστικά για κάθε τύπο παραθύρου διαλόγουΜε αυτόν τον τρόπο, το πρόγραμμα περιήγησης θα θυμάται τον τελευταίο φάκελο που χρησιμοποιήθηκε ανεξάρτητα για κάθε αναγνωριστικό και δεν θα μπερδεύετε τις διαδρομές εγγράφων με τις διαδρομές εικόνας.

Απομνημόνευση πρόσφατων αρχείων και φακέλων με το IndexedDB

Ένα από τα δυνατά σημεία του File System Access είναι ότι οι χειριστές του είναι σειριοποιήσιμοι. Αυτό σημαίνει ότι μπορείτε να αποθηκεύσετε FileSystemFileHandle y FileSystemDirectoryHandle σε IndexedDB και να τα ανακτήσετε σε επόμενες συνεδρίες, τηρώντας πάντα την πολιτική δικαιωμάτων.

Χάρη σε αυτό, οι εφαρμογές ιστού μπορούν να προσφέρουν τυπικές λειτουργίες επιφάνειας εργασίας, όπως λίστες πρόσφατων αρχείων, άνοιγμα ξανά του τελευταίου έργου ή ανάκτηση του προηγούμενου φακέλου εργασίαςΑπλώς πρέπει να αποθηκεύσετε τις λαβές στη βάση δεδομένων του προγράμματος περιήγησης και να τις διαβάσετε όταν ξεκινήσει η εφαρμογή.

Όταν ανακτάτε μια αποθηκευμένη λαβή, Μην υποθέτετε ότι οι άδειες θα παραμείνουν σε ισχύ.Το πρόγραμμα περιήγησης ενδέχεται να αποφασίσει ότι πρέπει να ζητηθεί ξανά εξουσιοδότηση, για παράδειγμα, επειδή έχει περάσει κάποιος χρόνος ή επειδή η τελευταία καρτέλα από αυτήν την πηγή έχει κλείσει. Επομένως, συνιστάται ο κώδικάς σας να ελέγχει για αυτήν την περίπτωση.

Για αυτόν τον έλεγχο, Το API περιλαμβάνει τις μεθόδους queryPermission() y requestPermission() τόσο σε χειριστές αρχείων όσο και σε καταλόγουςΑρχικά, ρωτάτε σε ποια κατάσταση βρίσκεται η άδεια και, εάν δεν "χορηγηθεί", μπορείτε να την ζητήσετε ξανά από τον χρήστη, υποδεικνύοντας στις επιλογές εάν χρειάζεστε μόνο ανάγνωση ή ανάγνωση και εγγραφή.

Μια καλή πρακτική είναι συνδυάστε και τα δύο βήματα σε μία λειτουργία βοήθειας Δεδομένου ενός δείκτη χειρισμού και μιας λειτουργίας (μόνο για ανάγνωση ή ανάγνωση/εγγραφή), θα πρέπει να ελέγξει εάν έχει ήδη δοθεί άδεια και, εάν όχι, να εμφανίσει την αντίστοιχη προτροπή. Αυτό μειώνει τον αριθμό των διαλόγων και κάνει την εμπειρία πιο ομαλή.

Άνοιγμα και περιήγηση σε ολόκληρους καταλόγους από το πρόγραμμα περιήγησης

Εκτός από μεμονωμένα αρχεία, το API επιτρέπει την εργασία με ολόκληρους φακέλους. με showDirectoryPicker() ο χρήστης μπορεί να επιλέξει έναν πλήρη κατάλογοκαι η εφαρμογή λαμβάνει ένα FileSystemDirectoryHandle που δίνει πρόσβαση σε όλα τα στοιχεία του.

Από προεπιλογή, θα έχετε δικαίωμα ανάγνωσης στα αρχεία σε αυτόν τον κατάλογο, αν και αν χρειαστεί να γράψετε και σε αυτά Μπορείτε να ζητήσετε πρόσβαση ανάγνωσης και εγγραφής περνώντας { mode: 'readwrite' } όταν καλώ showDirectoryPicker()Από εκείνη τη στιγμή και μετά, η εφαρμογή σας μπορεί να καταχωρίσει και να χειριστεί το περιεχόμενο σύμφωνα με την άδεια που έχει εκχωρηθεί.

Για να περιηγηθείτε στον φάκελο, Μπορείτε να επαναλάβετε ασύγχρονα dirHandle.values()η οποία επιστρέφει, ένα προς ένα, τα στοιχεία που περιέχει: αρχεία και υποκαταλόγους. Κάθε καταχώρηση έχει μια ιδιότητα kind που σας λέει αν πρόκειται για "file" ή ένα "directory".

Αν χρειάζεστε πρόσβαση σε πληροφορίες σχετικά με κάθε αρχείο, όπως το μέγεθός του, μπορείτε να καλέσετε entry.getFile(). Σε αυτές τις περιπτώσεις, συνιστάται η παράλληλη εκτέλεση των μετρήσεων χρησιμοποιώντας Promise.all() ή παρόμοιες τεχνικές, αντί να πηγαίνουν ένα προς ένα με αυστηρά διαδοχικό τρόπο, κάτι που μπορεί να είναι πιο αργό.

Μπορείτε επίσης να το κάνετε αυτό από έναν κατάλογο δημιουργήστε νέους φακέλους ή αρχεία με getDirectoryHandle() y getFileHandle()Μπορείτε να καθορίσετε στις επιλογές εάν θέλετε να δημιουργηθούν, εάν δεν υπάρχουν ήδη. Για παράδειγμα, μπορείτε να ρυθμίσετε μια δομή έργου όπως "Το Έργο μου / Κώδικας / Σημειώσεις.txt" απευθείας από την εφαρμογή web.

Διαχείριση αρχείων: διαγραφή, μετονομασία και μετακίνηση

Το API δεν περιορίζεται στην ανάγνωση και τη γραφή. Σας επιτρέπει επίσης να διαγράψετε αρχεία και φακέλους από έναν κατάλογο χρησιμοποιώντας removeEntry() σε ένα FileSystemDirectoryHandleΕάν πρόκειται για φάκελο, μπορείτε να κάνετε τη διαγραφή αναδρομική, έτσι ώστε να περιλαμβάνει όλους τους υποφακέλους και τα αρχεία του.

Αν αντί να περάσετε από τον κατάλογο θέλετε να ενεργήσετε απευθείας σε μια λαβή αρχείου ή φακέλου, Ορισμένα προγράμματα περιήγησης προσφέρουν αυτήν τη μέθοδο remove() en FileSystemFileHandle y FileSystemDirectoryHandleΜε αυτόν τον τρόπο αφαιρείτε αυτό το στοιχείο χωρίς να χρειάζεται να ανατρέξετε στο όνομά του μέσα στον γονικό κατάλογο.

Για οργανωτικές λειτουργίες όπως μετονομασία ή μετακίνηση στοιχείων σε άλλο φάκελο, Υπάρχει μια μέθοδος move() στη διεπαφή FileSystemHandleΜπορείτε να του μεταβιβάσετε απευθείας ένα νέο όνομα, έναν κατάλογο προορισμού ή έναν κατάλογο συν το νέο όνομα για μετακίνηση και μετονομασία ταυτόχρονα.

Ωστόσο, υπάρχουν κάποιες λεπτές αποχρώσεις όσον αφορά τη συμβατότητα: η υποστήριξη του move() Είναι πιο ώριμο για αρχεία εντός του ιδιωτικού συστήματος αρχείων πηγής (OPFS)και ενδέχεται να εξακολουθεί να βρίσκεται πίσω από σημαίες ή να μην έχει υλοποιηθεί για όλα τα σενάρια ή για καταλόγους σε ορισμένα προγράμματα περιήγησης.

Σύρετε και αποθέστε αρχεία και φακέλους στον ιστό

Το API Πρόσβασης Συστήματος Αρχείων ενσωματώνεται πολύ καλά με το σύστημα μεταφοράς και απόθεσης της HTML. Όταν ο χρήστης σύρει αρχεία ή φακέλους από το λειτουργικό σύστημα σε μια ιστοσελίδατο πρόγραμμα περιήγησης δημιουργεί στοιχεία DataTransferItem συνεργάτες.

Μέσω της μεθόδου DataTransferItem.getAsFileSystemHandle(), μπορείς να αποκτήσεις ένα FileSystemFileHandle αν το στοιχείο είναι αρχείο ή FileSystemDirectoryHandle αν είναι ένας κατάλογοςΈτσι, μια εφαρμογή μπορεί να επιτρέψει στον χρήστη να σύρει και να αποθέσει έναν ολόκληρο φάκελο με φωτογραφίες και να εργαστεί απευθείας στο περιεχόμενό του.

Θα πρέπει να έχετε κατά νου ότι, στο πλαίσιο της μεταφοράς και απόθεσης, DataTransferItem.kind Θα είναι πάντα "αρχείο" και για τα αρχεία και για τους φακέλουςΘα κατανοήσετε τη διαφορά μεταξύ αρχείου και καταλόγου ανατρέχοντας στην ιδιότητα kind del FileSystemHandle που σου επιστρέφει getAsFileSystemHandle()που θα διαφοροποιήσει μεταξύ "file" y "directory".

Σύστημα αρχείων ιδιωτικής πηγής (OPFS) και βελτιστοποιημένη πρόσβαση

Εκτός από την πρόσβαση στα αρχεία και τους φακέλους του χρήστη, τα προγράμματα περιήγησης Chromium προσφέρουν ιδιωτικό σύστημα αρχείων προέλευσης (OPFS)Αυτός είναι ένας χώρος αποθήκευσης αφιερωμένος σε κάθε ιστότοπο, στον οποίο ο χρήστης δεν έχει άμεση πρόσβαση από το λειτουργικό σύστημα.

Στην πράξη, αυτό σημαίνει ότι Παρόλο που το πρόγραμμα περιήγησης αποθηκεύει εσωτερικά αυτά τα δεδομένα στο δίσκο, ο χρήστης δεν θα τα βρει ως "κανονικά" αρχεία σε κανέναν παλιό φάκελο.Αυτό θα μπορούσε να είναι μια βάση δεδομένων, συσκευασμένα αρχεία ή οποιαδήποτε εσωτερική δομή που το πρόγραμμα περιήγησης κρίνει κατάλληλη.

Από το API μπορείτε να αποκτήσετε πρόσβαση στη ρίζα αυτού του ιδιωτικού συστήματος χρησιμοποιώντας navigator.storage.getDirectory(), το οποίο επιστρέφει ένα FileSystemDirectoryHandle. Από εκεί μπορείτε να δημιουργήσετε αρχεία και καταλόγους, να τα διαβάσετε, να γράψετε σε αυτά, να τα μετονομάσετε ή να τα διαγράψετε σαν να ήταν στοιχεία του τοπικού συστήματος αρχείων.Αλλά γνωρίζοντας ότι είναι απομονωμένοι και αφιερωμένοι αποκλειστικά στην εφαρμογή ιστού σας.

Για πιο προηγμένες ανάγκες απόδοσης, Το Chromium ενσωματώνει έναν ειδικό τύπο αρχείου με βελτιστοποιημένη σύγχρονη πρόσβαση. Μέσω fileHandle.createSyncAccessHandle() (διαθέσιμο σε workers), μπορείτε να αποκτήσετε μια λαβή που επιτρέπει σύγχρονη και αποκλειστική ανάγνωση και γραφή, η οποία είναι χρήσιμη για περιπτώσεις χρήσης πολύ εντατικής ή ευαίσθητης στην καθυστέρηση.

Η απόκτηση του δείκτη χειρισμού εξακολουθεί να είναι ασύγχρονη, αλλά μόλις τον αποκτήσετε, Οι λειτουργίες ανάγνωσης και εγγραφής εκτελούνται ως άμεσες κλήσεις, χειριζόμενες τα buffer byte.Αυτό προσεγγίζει πολύ την απόδοση μιας εγγενούς εφαρμογής, αλλά χωρίς να εγκαταλείπει το περιβάλλον ιστού και να διατηρεί την απομόνωση από το ιδιωτικό σύστημα πηγής.

Πολυγεμίσματα και εναλλακτικές λύσεις όταν δεν υπάρχει εγγενής υποστήριξη

Παρόλο που το File System Access API προσφέρει πολλές δυνατότητες, Δεν το υποστηρίζουν ακόμα όλα τα προγράμματα περιήγησηςΔεν είναι δυνατό να δημιουργηθεί ένα πλήρες polyfill που να αναπαράγει όλες τις δυνατότητές του, κυρίως επειδή δεν υπάρχει τρόπος αξιόπιστης προσομοίωσης της εγγενούς πρόσβασης στο σύστημα αρχείων χωρίς τη συνεργασία του ίδιου του προγράμματος περιήγησης.

Ωστόσο, ορισμένα μέρη μπορούν να υπολογιστούν κατά προσέγγιση. Για να μιμηθούμε showOpenFilePicker() ένα απλό <input type="file">, το οποίο εμφανίζει το πλαίσιο επιλογής αρχείου και επιτρέπει στον χρήστη να επιλέξει ένα ή περισσότερα αρχεία.

Κάτι παρόμοιο συμβαίνει και με την αποταμίευση. Να μιμηθείς showSaveFilePicker() ένας σύνδεσμος χρησιμοποιείται συχνά <a download="nombre"> Κάνοντας κλικ σε αυτό, ξεκινά η λήψη ενός Blob που δημιουργείται από JavaScript. Αυτό σας επιτρέπει να "αποθηκεύσετε" δεδομένα που δημιουργούνται από τον ιστότοπο, αν και δεν προσφέρει την επιλογή αντικατάστασης υπαρχόντων αρχείων.

Όσον αφορά την επιλογή ολόκληρων καταλόγων, το μη τυπικό χαρακτηριστικό έχει παραδοσιακά χρησιμοποιηθεί webkitdirectory en <input type="file">το οποίο σας επιτρέπει να επιλέξετε έναν φάκελο και να λάβετε μια λίστα με τα αρχεία που περιέχει. Δεν είναι μια καθολική λύση ούτε τόσο ισχυρή όσο showDirectoryPicker()αλλά καλύπτει ορισμένες περιπτώσεις.

Για να ενοποιηθούν αυτές οι προσεγγίσεις, Υπάρχουν βιβλιοπωλεία όπως πρόσβαση-fs-του-προγράμματος-πλοήγησης Προσπαθούν να χρησιμοποιούν το σύγχρονο API όποτε είναι διαθέσιμο και, αν όχι, καταφεύγουν αυτόματα σε αυτές τις καλύτερες εναλλακτικές λύσεις.Με αυτόν τον τρόπο, ο προγραμματιστής γράφει σχετικά ομοιόμορφο κώδικα και η βιβλιοθήκη φροντίζει για την προσαρμογή του στο περιβάλλον.

Ασφάλεια, δικαιώματα και έλεγχος χρηστών

Όλη αυτή η δύναμη συνοδεύεται από ευθύνες και οι ομάδες των προγραμμάτων περιήγησης το γνωρίζουν πολύ καλά. Ο σχεδιασμός του File System Access API περιστρέφεται γύρω από δύο αρχές: τον έλεγχο του χρήστη και τη διαφάνεια.Δεν υπάρχει περίπτωση ένας ιστότοπος να διαβάσει κρυφά τον μισό σκληρό δίσκο.

Όταν ο χρήστης ανοίγει ένα αρχείο χρησιμοποιώντας τα πλαίσια επιλογής (είτε για να διαβάσει είτε για να αποθηκεύσει ένα νέο), Είναι αυτή η χειρονομία που παρέχει άδεια ανάγνωσης ή εγγραφής στο συγκεκριμένο αρχείο ή φάκελοΕάν ο χρήστης αλλάξει γνώμη και ακυρώσει τον διάλογο, ο ιστότοπος δεν λαμβάνει τίποτα και επομένως δεν αποκτά καμία πρόσβαση.

Για να αποθηκεύσετε ένα νέο αρχείο, κάντε κλικ στο πλαίσιο «Αποθήκευση» Δεν σας επιτρέπει μόνο να επιλέξετε ένα όνομα και μια διαδρομή, αλλά χρησιμεύει επίσης ως παραχώρηση δικαιώματος εγγραφής σε αυτό το νεοδημιουργημένο αρχείο.Η λογική είναι η ίδια με αυτή που χρησιμοποιείται εδώ και χρόνια σε στοιχεία όπως <input type="file">αλλά επεκτάθηκε με περισσότερες δυνατότητες.

Όταν μια διαδικτυακή εφαρμογή θέλει να τροποποιήσει ένα αρχείο που ήδη υπάρχει, Δεν μπορεί απλώς να το κάνει αυτό. Το πρόγραμμα περιήγησης μπορεί να εμφανίσει μια συγκεκριμένη ειδοποίηση που να ζητά άδεια για εγγραφή σε αυτό.Αυτό το παράθυρο διαλόγου μπορεί να ανοίξει μόνο ως απόκριση σε μια ενέργεια χρήστη, όπως το πάτημα του κουμπιού "Αποθήκευση αλλαγών".

Εάν ο χρήστης αποφασίσει να μην παραχωρήσει αυτό το δικαίωμα εγγραφής, Ο ιστότοπος πρέπει να προσφέρει κάποια εναλλακτική λύση: λήψη ενός αντιγράφου, αποθήκευση στο cloud, εργασία σε OPFS ή άλλον παρόμοιο μηχανισμό.Η ιδέα είναι ότι ο χρήστης έχει πάντα τον τελευταίο λόγο για το τι αγγίζεται στο τοπικό του σύστημα.

Όσον αφορά τη διαφάνεια, Τα προγράμματα περιήγησης εμφανίζουν ένα εικονίδιο στη γραμμή διευθύνσεων όταν ένας ιστότοπος έχει πρόσβαση σε τοπικά αρχείαΕάν ο χρήστης κάνει κλικ σε αυτό το εικονίδιο, θα δει μια λίστα με τα αρχεία ή τους φακέλους στους οποίους έχει πρόσβαση η σελίδα εκείνη τη στιγμή και μπορεί να ανακαλέσει τα δικαιώματα όποτε θέλει.

Οι άδειες δεν είναι μόνιμες. Γενικά, μια σελίδα διατηρεί τη δυνατότητα να συνεχίσει να αποθηκεύει αρχεία μόνο εφόσον είναι ανοιχτή τουλάχιστον μία καρτέλα από αυτήν την πηγή.Μόλις κλείσουν όλα αυτά, το πρόγραμμα περιήγησης μπορεί να θεωρήσει ότι η συνεδρία έχει τελειώσει και, στην επόμενη χρήση, θα είναι απαραίτητο να ζητήσει ξανά άδεια για αυτά τα αρχεία ή τους καταλόγους.

Συνδυάζοντας το σχήμα file:/// για να ανοίξετε συγκεκριμένους πόρους, το συντομεύσεις πληκτρολογίου για την αποστολή τοπικών αρχείων και το API πρόσβασης συστήματος αρχείων για εις βάθος ενσωματώσεις Αυτό καθιστά το πρόγραμμα περιήγησης ένα πολύ πιο ευέλικτο εργαλείο τόσο για τους χρήστες όσο και για τους προγραμματιστές.επιτρέποντάς σας να προβάλετε γρήγορα ένα βίντεο που είναι αποθηκευμένο σε δίσκο ή να επεξεργαστείτε ολόκληρα έργα χωρίς να εγκαταλείψετε το περιβάλλον ιστού.