?? ??? ??? API? ? ????? ???? ?? ??? ?? ?? ??? ??? ??? ??? ???? ?? ? ?? ???? ???????. ?? ???? ??? ?? ??? ?? ??? ???, IDE, ??? ?? ?? ? ??? ?? ??/???? ??? ???? ??? ? ??????? ?? ? ??? ???? ???? ?????. ? API ??? ???? ??? ?? ?????.

?? ??? : ?? ? ??

?? ??? ??? API ??? ??? ??? ?????. ?? API ??? ??? ???? ??? ??? ???? ?? ????????. ?? ???? ?? ???? ???????.

?? ?? : ?? ??

?? ??? ?? ?? ?? ?????.

 ?? ????;

document.querySelector ( ". pick-file"). onclick = async () => {
  [FileHandle] = Await Window.ShowOpenFilePicker ();

  const file = await fileHandle.getFile ();
  const content = await file.text ();

  ?? ??;
};

Assuming an HTML button with the class "pick-file", clicking this button triggers the file picker via window.showOpenFilePicker() . The selected file's handle is stored in fileHandle . ??? ??? ??? ???? ?????.

The fileHandle object provides properties like kind (either "file" or "directory") and name .

 // console.log (FileHandle)? ?? ??
FileSystemFileHandle {Kind : 'File', ?? : 'data.txt'}

fileHandle.getFile() retrieves file details (last modified timestamp, name, size, type), and file.text() extracts the file's content.

?? ??? ????

To read multiple files, pass an options object to showOpenFilePicker() :

 ?? ????;
const ?? = {?? : true};

document.querySelector ( ". pick-file"). onclick = async () => {
  FileHandles = Await Window.showoPenFilePicker (??);

  // ?? ??? ???? ?? (?? ??)
};

The multiple property (default: false ) enables multiple file selection. ?? ??? ?? ??? ?? ??? ?????. ?? ?? JPEG ??? ? ????? ??? ????.

 const ?? = {
  ?? : [{?? : "???", ?? : { "image/jpeg": ".jpeg"}}],
  ExcludeAcceptalloption : true,
};

?? ?? ?? :

 const allcontent = await promise.all (
  filehandles.map (async (filehandle) => {
    const file = await fileHandle.getFile ();
    const content = await file.text ();
    ?? ??;
  })
);

Console.log (AllContent);

??? ?? : ? ??

? ??? ???? ?? ?? ?????.

 document.querySelector ( ". Save-File"). OnClick = async () => {
  const ?? = {
    ?? : [{?? : "??? ??", ?? : { "text/plain": [ ".txt"]}}],
  };

  const ?? = Await Window.showsaveFilePicker (??);
  Const Writable = Await Handle.createWritable ();

  writable.write ( "Hello World");
  writable.close ()? ?????.

  ?? ??;
};

window.showSaveFilePicker() opens the file save dialog. handle.createWritable() creates a writable stream, writable.write() writes data, and writable.close() finalizes the write operation.

?? ?? ??

?? ??? ????? :

 ?? ????;

document.querySelector ( ". pick-file"). onclick = async () => {
  [FileHandle] = Await Window.ShowOpenFilePicker ();

  const file = await fileHandle.getFile ();
  const Writable = await filehandle.createWritable ();

  writable.write ( "??? ??? ????"); // ??? ?????
  writable.close ()? ?????.
};

? ??? ???? ?????. ?? ??? ??? ?? ???? ??????.

?? ??

?? ??? ??? API? ???? ?? ? ??/???? ??? ?????.

???? ??

 document.querySelector ( ". read-dir"). onclick = async () => {
  const directoryHandle = Await Window.ShowDirectoryPicker ();

  ?? ? (directoryHandle.Values ??())? const intration {) {
    Console.log (Entry.kind, Entry.Name);
  }
};

window.showDirectoryPicker() selects a directory, and the loop iterates through its entries.

?? ? ???? ??

?? ?? :

 document.querySelector ( ". pick-file"). onclick = async () => {
  const [filehandle] = await Window.showOpenFilePicker ();
  AWAIT FILEHANDLE.REMOVE ();
};

???? ?? (?? ???) :

 document.querySelector ( ". pick-folder"). onclick = async () => {
  const directoryHandle = Await Window.ShowDirectoryPicker ();
  directoryHandle.removeEntry ( 'data', {recursive : true});
};

???? ???

?? ??? ??? API? ?? ?????? ???? ??? ??? ? Caniuse.com?? ?? ?? ??? ??? ??????. A ponyfill like browser-fs-access can address compatibility gaps.

??

• ?? ??? ??? API (W3C ??)
• ?? ??? ??? API (MDN)
• ?? ?? ???

? ??? ??? ?? ??? ??? API? ???? ????? ??? ? ???? ?????. ?? ?? ? ??? ?? ??? ?? ?? ??? ??? ?? ?? ????.

? ??? ?? ??? ??? API? ?????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!