File System Access API, web uygulamalarının değişiklikleri doğrudan kullanıcının cihazındaki dosyalar ve klasörlerde okumasına veya kaydetmesine olanak tanır.
File System Access API nedir?
File System Access API, geliştiricilerin Kullanıcının yerel cihazındaki IDE'ler, fotoğraf ve video düzenleyiciler, metin düzenleyiciler vb. dosyalar. Şu tarihten sonra: Kullanıcı bir web uygulamasına erişim izni verirse bu API, kullanıcının değişiklikleri okumasına veya doğrudan dosyalara kaydetmesine kullanıcının cihazındaki klasörlere. File System Access API, dosya okuma ve yazmanın ötesinde, dizinini açma ve içeriğini numaralandırma özelliği.
Daha önce dosya okuma ve yazma konusuyla çalıştıysanız şimdiki konuların çoğunu size tanıdık gelecektir. Tüm sistemler birbirinin aynısı olmadığından bu e-postayı yine de okumanızı öneririm.
File System Access API, şu tarayıcılarda çoğu Chromium tarayıcısında desteklenir: Windows, macOS, ChromeOS ve Linux. Bunun önemli bir istisnası Brave'dir. şu anda yalnızca bir işaretin arkasında kullanılabilir. Android desteği, crbug.com/1011535 bağlamında yapılmaktadır.
File System Access API'yi kullanma
File System Access API'nin gücünü ve kullanışlılığını göstermek için tek bir dosya metin düzenleyici'ye gidin. Bir metin dosyasını açmanıza, düzenlemenize, değişiklikleri diske geri kaydetmenize veya yeni bir dosya açın ve değişiklikleri diske kaydedin. Süslü bir şey değil, ancak size yardımcı olacak yeterince içerik sunuyor anlamaya başlamışsınızdır.
Tarayıcı desteği
Özellik algılama
File System Access API'nin desteklenip desteklenmediğini öğrenmek için seçici yönteminin desteklenip desteklenmediğini kontrol edin bilgi edinmenizi sağlar.
if ('showOpenFilePicker' in self) {
// The `showOpenFilePicker()` method of the File System Access API is supported.
}
Dene
File System Access API'nin nasıl çalıştığını şu sayfada görebilirsiniz: metin düzenleyici demosunu göreceksiniz.
Yerel dosya sisteminden dosya okuma
Uygulamak istediğim ilk kullanım alanı, kullanıcıdan bir dosya seçmesini istemek, ardından bu dosyayı açıp okumak. dosyası oluşturur.
Kullanıcıdan okuyacak bir dosya seçmesini isteyin
File System Access API'nin giriş noktası:
window.showOpenFilePicker()
. Çağrı yapıldığında bir dosya seçici iletişim kutusu gösterilir.
ve kullanıcıdan bir dosya seçmesini ister. Kullanıcı bir dosya seçtikten sonra API, bir dosya dizisi döndürür.
herkese açık kullanıcı adları için geçerlidir. İsteğe bağlı bir options
parametresi,
Örneğin, kullanıcının birden fazla dosya, dizin ya da farklı dosya türleri seçmesine izin verebilirsiniz.
Dosya seçici, herhangi bir seçenek belirtilmediğinde kullanıcının tek bir dosya seçmesine olanak tanır. Bu
için idealdir.
Diğer birçok güçlü API gibi, showOpenFilePicker()
çağrısı da güvenli
bağlam ve kullanıcı hareketinin içinden çağrılmalıdır.
let fileHandle;
butOpenFile.addEventListener('click', async () => {
// Destructure the one-element array.
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
Kullanıcı bir dosya seçtiğinde, showOpenFilePicker()
bir herkese açık kullanıcı adı dizisi döndürür. Bu örnekte,
özelliklerini içeren bir FileSystemFileHandle
içeren tek öğeli dizi
dosyayla etkileşim kurmak için gereken yöntemleri içerir.
Daha sonra kullanılabilmesi için dosya herkese açık kullanıcı adını referans tutmanızda fayda vardır. Bu değişiklikleri dosyaya kaydetmek veya dosya ile ilgili diğer işlemleri gerçekleştirmek için gereken her şey.
Dosya sisteminden dosya okuma
Artık bir dosyanın herkese açık kullanıcı adını bildiğinize göre dosyanın özelliklerini alabilir veya dosyanın kendisine erişebilirsiniz.
Şimdilik içeriğini okuyacağım. handle.getFile()
çağrısı yapıldığında File
döndürülür
nesnesini ifade eder. Blobtan verileri almak için bloblardan birini çağırın
yöntemler, (slice()
,
stream()
,
text()
veya
arrayBuffer()
) tıklayın.
const file = await fileHandle.getFile();
const contents = await file.text();
.
FileSystemFileHandle.getFile()
tarafından döndürülen File
nesnesi yalnızca
dosya değişmedi. Diskteki dosya değiştirilirse File
nesnesi
okunamaz ve değiştirilen ayarı okumak için yeni bir File
nesnesi almak üzere getFile()
öğesini tekrar çağırmanız gerekir
dışı verilerdir.
Tüm unsurların birleşimi
Kullanıcılar Aç düğmesini tıkladığında tarayıcıda bir dosya seçici gösterilir. Bir dosya seçtikten sonra
uygulama içerikleri okur ve bir <textarea>
içine yerleştirir.
let fileHandle;
butOpenFile.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
textArea.value = contents;
});
Dosyayı yerel dosya sistemine yazma
Metin düzenleyicide bir dosyayı kaydetmenin iki yolu vardır: Kaydet ve Farklı Kaydet. Kaydet işlemi daha önce alınan dosya tanıtıcısını kullanarak değişiklikleri orijinal dosyaya yazar. Ancak Kaydet As, yeni bir dosya oluşturur ve bu nedenle yeni bir dosya herkese açık kullanıcı adı gerektirir.
Yeni dosya oluşturma
Bir dosyayı kaydetmek için, dosya seçiciyi gösteren showSaveFilePicker()
çağrısını yapın
"kaydet" içinde kullanıcının kaydetmek üzere kullanmak istediği yeni bir dosyayı seçmesine olanak tanır. Metin için
Ayrıca, otomatik olarak bir .txt
uzantısı eklemesini de istedim. Buna ek olarak
parametreleridir.
async function getNewFileHandle() {
const options = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt'],
},
},
],
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
.
Değişiklikleri diske kaydet
Bir dosyada yapılan değişiklikleri kaydetmek için gereken tüm kodu aşağıdaki metin düzenleyici demomuzda bulabilirsiniz:
GitHub. Temel dosya sistemi etkileşimleri
fs-helpers.js
. En basit şekilde, işlem aşağıdaki kod gibi görünür.
Her adımı tek tek açıklayacağım.
// fileHandle is an instance of FileSystemFileHandle..
async function writeFile(fileHandle, contents) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Write the contents of the file to the stream.
await writable.write(contents);
// Close the file and write the contents to disk.
await writable.close();
}
Diske veri yazılırken bir alt sınıf olan FileSystemWritableFileStream
nesnesi kullanılır
WritableStream
. Dosyada createWritable()
yöntemini çağırarak akışı oluşturun
işleyici nesnesidir. createWritable()
çağrıldığında, tarayıcı ilk olarak kullanıcının izin verip vermediğini kontrol eder
dosyaya yazma izni olduğundan emin olun. Yazma izni verilmediyse tarayıcı komut istemi
kullanıcıdan izin alması gerekir. İzin verilmezse createWritable()
,
DOMException
ve uygulama dosyaya yazamaz. Metin düzenleyicide,
DOMException
nesne, saveFile()
yönteminde işlenir.
write()
yöntemi, metin düzenleyici için gerekli olan bir dize alır. Ama aynı zamanda
BufferSource veya Blob. Örneğin, bir akışı doğrudan
şunları sağlar:
async function writeURLToFile(fileHandle, url) {
// Create a FileSystemWritableFileStream to write to.
const writable = await fileHandle.createWritable();
// Make an HTTP request for the contents.
const response = await fetch(url);
// Stream the response into the file.
await response.body.pipeTo(writable);
// pipeTo() closes the destination pipe by default, no need to close it.
}
Ayrıca akışta seek()
veya truncate()
düğmesini tıklayarak
belirli bir konuma getirin veya dosyayı yeniden boyutlandırın.
Önerilen bir dosya adı ve başlangıç dizini belirtme
Birçok durumda, uygulamanızın varsayılan bir dosya adı veya konum önermesini isteyebilirsiniz. Örneğin,
düzenleyici, Untitled
yerine varsayılan dosya adı olarak Untitled Text.txt
önerebilir. Siz
bunu showSaveFilePicker
seçeneklerinin bir parçası olarak suggestedName
özelliği ileterek elde edebilir.
const fileHandle = await self.showSaveFilePicker({
suggestedName: 'Untitled Text.txt',
types: [{
description: 'Text documents',
accept: {
'text/plain': ['.txt'],
},
}],
});
Aynı durum varsayılan başlangıç dizini için de geçerlidir. Bir metin düzenleyici oluşturuyorsanız,
dosyayı kaydetme veya dosya açma iletişim kutusunu varsayılan documents
klasöründe başlatırken, bir resim için
düzenleyicisini varsayılan pictures
klasöründen başlatmak isteyebilirsiniz. Varsayılan bir başlangıç önerebilirsiniz
dizinini oluşturmak için startIn
özelliğini showSaveFilePicker
, showDirectoryPicker()
veya
Benzer showOpenFilePicker
yöntem.
const fileHandle = await self.showOpenFilePicker({
startIn: 'pictures'
});
İyi bilinen sistem dizinleri listesi:
desktop
: Kullanıcının masaüstü dizini (varsa).documents
: Kullanıcı tarafından oluşturulan dokümanların genellikle depolanacağı dizin.downloads
: İndirilen dosyaların genellikle depolanacağı dizin.music
: Ses dosyalarının genellikle depolanacağı dizin.pictures
: Fotoğrafların ve diğer hareketsiz resimlerin genellikle depolanacağı dizin.videos
: Videoların veya filmlerin genellikle depolanacağı dizin.
Tanınmış sistem dizinlerinin yanı sıra, mevcut bir dosyayı veya dizin tutma yerini de
startIn
için bir değer. İletişim kutusu aynı dizinde açılır.
// Assume `directoryHandle` is a handle to a previously opened directory.
const fileHandle = await self.showOpenFilePicker({
startIn: directoryHandle
});
Farklı dosya seçicilerin amacını belirtme
Bazen uygulamalarda farklı amaçlar için farklı seçiciler bulunur. Örneğin, zengin metin
düzenleyici, kullanıcının metin dosyalarını açmasına aynı zamanda resimleri içe aktarmasına da izin verebilir. Varsayılan olarak her dosya
seçici, hatırlanan son konumda açılır. id
değerlerini depolayarak bu durumu atlatabilirsiniz
her tür seçici için iyi performans gösterir. id
belirtilirse dosya seçici uygulaması
bu id
için son kullanılan dizini ayrı tutun.
const fileHandle1 = await self.showSaveFilePicker({
id: 'openText',
});
const fileHandle2 = await self.showSaveFilePicker({
id: 'importImage',
});
Dosya tanıtıcılarını veya dizin tanıtıcılarını IndexedDB'de depolama
Dosya tanıtıcıları ve dizin tanıtıcıları seri hale getirilebilir, yani bir dosyayı veya dizin
IndexedDB için dizin tutamacı olarak veya postMessage()
öğesini çağırarak aynı üst düzey
kaynak.
Dosya veya dizin tanıtıcılarını IndexedDB'ye kaydetmek, durumu depolayabileceğiniz veya dosyaları veya dizinleri içerebilir. Bu, yakın zamanda açılan kampanyaların bir listesini tutmanızı mümkün kılar veya düzenlenmiş dosyalar, uygulama açıldığında son dosyayı yeniden açmayı teklif etme, önceki çalışan dosyayı geri yükleme dizini ve diğer verileri gösterir. Metin düzenleyicide, kullanıcının sahip olduğu en son beş dosyanın bir listesini saklarım bu dosyalara yeniden erişebilmek mümkün oluyor.
Aşağıdaki kod örneğinde, bir dosya işleyici ile dizin işleyicinin depolanması ve alınması gösterilmektedir. Şunları yapabilirsiniz: bunun işleyiş şeklini Glitch'te görebilirsiniz. (Ben idb-keyval kitaplığının kısaltılmış halidir.)
import { get, set } from 'https://unpkg.com/idb-keyval@5.0.2/dist/esm/index.js';
const pre1 = document.querySelector('pre.file');
const pre2 = document.querySelector('pre.directory');
const button1 = document.querySelector('button.file');
const button2 = document.querySelector('button.directory');
// File handle
button1.addEventListener('click', async () => {
try {
const fileHandleOrUndefined = await get('file');
if (fileHandleOrUndefined) {
pre1.textContent = `Retrieved file handle "${fileHandleOrUndefined.name}" from IndexedDB.`;
return;
}
const [fileHandle] = await window.showOpenFilePicker();
await set('file', fileHandle);
pre1.textContent = `Stored file handle for "${fileHandle.name}" in IndexedDB.`;
} catch (error) {
alert(error.name, error.message);
}
});
// Directory handle
button2.addEventListener('click', async () => {
try {
const directoryHandleOrUndefined = await get('directory');
if (directoryHandleOrUndefined) {
pre2.textContent = `Retrieved directroy handle "${directoryHandleOrUndefined.name}" from IndexedDB.`;
return;
}
const directoryHandle = await window.showDirectoryPicker();
await set('directory', directoryHandle);
pre2.textContent = `Stored directory handle for "${directoryHandle.name}" in IndexedDB.`;
} catch (error) {
alert(error.name, error.message);
}
});
Depolanan dosya veya dizin işleyicileri ve izinleri
İzinler oturumlar arasında her zaman uygulanmadığından, kullanıcının
queryPermission()
kullanarak dosya veya dizin için izin verdi. Henüz paylaşmadıysa şu numarayı arayın:
(yeniden) istemek için requestPermission()
. Bu işlem, dosya ve dizin işleyicileri için de aynı şekilde yapılır. Siz
fileOrDirectoryHandle.requestPermission(descriptor)
veya
Sırasıyla fileOrDirectoryHandle.queryPermission(descriptor)
.
Metin düzenleyicide kullanıcının daha önce kontrol edip etmediğini kontrol eden bir verifyPermission()
yöntemi oluşturdum.
istekte bulunur ve gerekirse istekte bulunur.
async function verifyPermission(fileHandle, readWrite) {
const options = {};
if (readWrite) {
options.mode = 'readwrite';
}
// Check if permission was already granted. If so, return true.
if ((await fileHandle.queryPermission(options)) === 'granted') {
return true;
}
// Request permission. If the user grants permission, return true.
if ((await fileHandle.requestPermission(options)) === 'granted') {
return true;
}
// The user didn't grant permission, so return false.
return false;
}
Okuma isteğiyle birlikte yazma izni isteyerek izin istemlerinin sayısını azalttım; Kullanıcı, dosyayı açarken bir istem görür ve dosyaya hem okuma hem de yazma izni verir.
Bir dizini açma ve içeriğini numaralandırma
Bir dizindeki tüm dosyaları numaralandırmak için showDirectoryPicker()
çağrısı yapın. Kullanıcı
seçicide bir dizin seçtiğinde, bundan sonra FileSystemDirectoryHandle
döndürülmüştür; bu, dizinin dosyalarını sıralamanıza ve bunlara erişmenize olanak tanır. Varsayılan olarak,
dizindeki dosyalara erişebilir, ancak yazma erişimine ihtiyacınız varsa
Yönteme { mode: 'readwrite' }
.
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
});
Ayrıca her dosyaya getFile()
kullanarak erişmeniz gerekiyorsa, örneğin,
boyutlarına göre, her sonuç için sıralı olarak await
kullanmayın, bunun yerine tüm dosyaları
(ör. Promise.all()
kullanarak) için paralellik de kullanabilirsiniz.
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
const promises = [];
for await (const entry of dirHandle.values()) {
if (entry.kind !== 'file') {
continue;
}
promises.push(entry.getFile().then((file) => `${file.name} (${file.size})`));
}
console.log(await Promise.all(promises));
});
Bir dizinde dosya ve klasör oluşturma veya bunlara erişme
Bir dizinde,
getFileHandle()
veya sırasıyla getDirectoryHandle()
yöntemidir. create
anahtarı ve şu boole değerine sahip isteğe bağlı bir options
nesnesi geçirerek
true
veya false
varsa, yeni bir dosya veya klasör yoksa yeni bir dosya veya klasörün oluşturulması gerekip gerekmediğini belirleyebilirsiniz.
// In an existing directory, create a new directory named "My Documents".
const newDirectoryHandle = await existingDirectoryHandle.getDirectoryHandle('My Documents', {
create: true,
});
// In this new directory, create a file named "My Notes.txt".
const newFileHandle = await newDirectoryHandle.getFileHandle('My Notes.txt', { create: true });
Dizindeki bir öğenin yolunu çözme
Bir dizindeki dosyalar veya klasörlerle çalışırken öğenin yolunu çözümlemek yararlı olabilir
söz konusu olabilir. Bu, uygun şekilde adlandırılmış resolve()
yöntemiyle yapılabilir. Çözüm için
öğesi, dizinin doğrudan veya dolaylı bir alt öğesi olabilir.
// Resolve the path of the previously created file called "My Notes.txt".
const path = await newDirectoryHandle.resolve(newFileHandle);
// `path` is now ["My Documents", "My Notes.txt"]
Dizindeki dosya ve klasörleri silme
Bir dizine erişim elde ettiyseniz içerilen dosya ve klasörleri
removeEntry()
yöntemini kullanabilirsiniz. Klasörler için silme işlemi isteğe bağlı olarak yinelenebilir ve
tüm alt klasörleri ve bunların içerdiği dosyaları.
// Delete a file.
await directoryHandle.removeEntry('Abandoned Projects.txt');
// Recursively delete a folder.
await directoryHandle.removeEntry('Old Stuff', { recursive: true });
Bir dosyayı veya klasörü doğrudan silme
Bir dosyaya veya dizin tutma yerine erişiminiz varsa FileSystemFileHandle
ya daremove()
Kaldırmak için FileSystemDirectoryHandle
.
// Delete a file.
await fileHandle.remove();
// Delete a directory.
await directoryHandle.remove();
Dosya ve klasörleri yeniden adlandırma ve taşıma
Dosya ve klasörler yeniden adlandırılabilir veya yeni bir konuma taşıyabilirsiniz move()
FileSystemHandle
arayüzü. FileSystemHandle
, FileSystemFileHandle
ve alt arayüzlere sahiptir
FileSystemDirectoryHandle
. move()
yöntemi bir veya iki parametre alır. İlki
yeni adı içeren bir dize veya hedef klasör için bir FileSystemDirectoryHandle
olmalıdır.
istiyorsanız isteğe bağlı ikinci parametre, yeni adı taşıyan bir dizedir. Dolayısıyla taşıma ve yeniden adlandırma,
tek adımda tamamlanabilir.
// Rename the file.
await file.move('new_name');
// Move the file to a new directory.
await file.move(directory);
// Move the file to a new directory and rename it.
await file.move(directory, 'newer_name');
.
Sürükle ve bırak entegrasyonu
İlgili içeriği oluşturmak için kullanılan
HTML Sürükle ve Bırak arayüzleri
web uygulamalarının kabul etmesine izin ver
dosyaları sürükleyip bırakma
bir web sayfasında
gösterebilirsiniz. Sürükle ve bırak işlemi sırasında sürüklenen dosya ve dizin öğeleri ilişkilendirilir
dizin girişlerine göre sıralayın. DataTransferItem.getAsFileSystemHandle()
yöntemi, sürüklenen öğe bir dosyaysa FileSystemFileHandle
nesnesiyle bir vaat döndürür ve
FileSystemDirectoryHandle
nesnesiyle belirtin. Aşağıdaki giriş
uygulamalı olarak gösterir. Sürükle ve Bırak arayüzünün arayüzünün
DataTransferItem.kind
Dosyalar ve dizinler için "file"
; File System Access API'nin FileSystemHandle.kind
ise
Dosyalar için "file"
ve dizinler için "directory"
.
elem.addEventListener('dragover', (e) => {
// Prevent navigation.
e.preventDefault();
});
elem.addEventListener('drop', async (e) => {
e.preventDefault();
const fileHandlesPromises = [...e.dataTransfer.items]
.filter((item) => item.kind === 'file')
.map((item) => item.getAsFileSystemHandle());
for await (const handle of fileHandlesPromises) {
if (handle.kind === 'directory') {
console.log(`Directory: ${handle.name}`);
} else {
console.log(`File: ${handle.name}`);
}
}
});
Kaynak gizli dosya sistemine erişme
Kaynak gizli dosya sistemi, adından da anlaşılacağı üzere
sayfanın başlangıcı. Tarayıcılar genellikle bu yapılandırmanın içeriğini
bir yerde diske bir kaynak gizli dosya sistemi kullanıyorsanız, içeriğin kullanıcı tarafından oluşturulması amaçlanmaz
erişilebilir. Benzer şekilde, dosya veya dizinlerin
kaynak gizli dosya sisteminin alt öğelerinin adları mevcut. Tarayıcı, tarayıcı tarafından
dahili olarak dosyalar vardır (bu bir kaynak gizli dosya sistemi olduğu için) tarayıcı
bu "dosyaları" veri yapısı olabilir. Bu API'yi kullanıyorsanız
oluşturulan dosyaların sabit diskte bire bir eşleştiğini bekleyemezsiniz. Şu cihazlarda her zamanki gibi çalışmaya devam edebilirsiniz:
kök FileSystemDirectoryHandle
kaynağına erişim sağladıktan sonra kaynak gizli dosya sistemini devre dışı bırakın.
const root = await navigator.storage.getDirectory();
// Create a new file handle.
const fileHandle = await root.getFileHandle('Untitled.txt', { create: true });
// Create a new directory handle.
const dirHandle = await root.getDirectoryHandle('New Folder', { create: true });
// Recursively remove a directory.
await root.removeEntry('Old Stuff', { recursive: true });
Kaynak gizli dosya sisteminden performans için optimize edilmiş dosyalara erişme
Kaynak gizli dosya sistemi, son derece normal
performans için optimize edilmiştir. Örneğin, bir dosyaya yerinde ve özel yazma erişimi sunarak
içerik. Chromium 102 ve sonraki sürümlerde kaynak gizli dosya sisteminde,
dosya erişimi basitleştiriliyor: createSyncAccessHandle()
(eşzamanlı okuma ve yazma işlemleri için).
FileSystemFileHandle
tarihinde sadece şurada açığa çıktı:
Web İşçileri.
// (Read and write operations are synchronous,
// but obtaining the handle is asynchronous.)
// Synchronous access exclusively in Worker contexts.
const accessHandle = await fileHandle.createSyncAccessHandle();
const writtenBytes = accessHandle.write(buffer);
const readBytes = accessHandle.read(buffer, { at: 1 });
.
Çoklu dolgu
File System Access API yöntemlerini tamamen doldurmak mümkün değildir.
showOpenFilePicker()
yöntemi, bir<input type="file">
öğesiyle tahmin edilebilir.showSaveFilePicker()
yöntemi, bir<a download="file_name">
öğesiyle simüle edilebilir Ancak bu, programatik indirme işlemini tetikler ve mevcut dosyaların üzerine yazmaya izin vermez.showDirectoryPicker()
yöntemi, standart dışı<input type="file" webkitdirectory>
öğesi.
browser-fs-access adlı bir kitaplık geliştirdik. System Access API mümkün olduğunda durumlarda işe yarar.
Güvenlik ve izinler
Chrome ekibi, File System Access API'yi temel ilkeleri kullanarak tasarlamış ve uygulamıştır. Kullanıcı erişimi dahil olmak üzere Güçlü Web Platformu Özelliklerine Erişimi Kontrol Etme'de tanımlanmıştır kontrol, şeffaflık ve kullanıcı ergonomisi.
Dosya açma veya yeni bir dosya kaydetme
![Okumak üzere bir dosyayı açmak için dosya seçici](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/file-system-access/image/file-picker-open-file-8cb5f6783ee89.jpg?authuser=9&hl=tr)
Bir dosyayı açarken kullanıcı, dosya seçiciyi kullanarak dosya veya dizini okuma izni verir.
Açık dosya seçici yalnızca güvenli bir
göz atın. Kullanıcılar fikirlerini değiştirirse dosyadaki seçimi iptal edebilir.
ve sitenin hiçbir şeye erişimi olmaz. Bu,
<input type="file">
öğesi.
![Bir dosyayı diske kaydetmek için dosya seçici.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/file-system-access/image/file-picker-save-file-bd54ae001799a.jpg?authuser=9&hl=tr)
Benzer şekilde, bir web uygulaması yeni bir dosya kaydetmek istediğinde tarayıcı, dosya kaydetme seçiciyi gösterir. kullanıcının yeni dosyanın adını ve konumunu belirtmesine olanak tanır. Yeni bir dosya kaydettiği için (mevcut bir dosyanın üzerine yazılması yerine) cihaza veri alırsa dosya seçici, uygulamaya yazması gerekir.
Kısıtlanmış klasörler
Kullanıcıların ve verilerinin korunmasına yardımcı olmak için tarayıcı, kullanıcının belirli klasörlerini de seçebilirsiniz. Bu durumda, tarayıcıda bir istem gösterilir ve kullanıcıdan farklı bir tıklayın.
Mevcut bir dosyayı veya dizini değiştirme
Bir web uygulaması, kullanıcıdan açık izin almadan diskteki bir dosyayı değiştiremez.
İzin istemi
Bir kullanıcı daha önce okuma erişimi verdiği bir dosyada yapılan değişiklikleri kaydetmek isterse, tarayıcı Sitenin, değişiklikleri diske yazma izni isteyen bir izin istemi gösteriyor. İzin isteği yalnızca bir kullanıcı hareketiyle (örneğin, Kaydet'i tıklayarak) tetiklenebilir. düğmesini tıklayın.
![Dosya kaydedilmeden önce gösterilen izin istemi.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/file-system-access/image/permission-prompt-shown-p-823d180f97ad5.png?authuser=9&hl=tr)
Alternatif olarak, IDE gibi birden fazla dosyayı düzenleyen bir web uygulaması da kayıt izni isteyebilir anında değişir.
Kullanıcı İptal'i seçer ve yazma erişimi vermezse web uygulaması, yapılan değişiklikleri yerel dosya. Kullanıcının verilerini kaydetmesi için alternatif bir yöntem Örneğin, "indirme" dosyaya kaydedebilir veya verileri buluta kaydedebilirsiniz.
Şeffaflık
![Çok amaçlı adres çubuğu simgesi](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/file-system-access/image/omnibox-icon-5797e9a831603.jpg?authuser=9&hl=tr)
Kullanıcı bir web uygulamasına yerel dosya kaydetme izni verdiğinde, tarayıcı bir simge yazın. Simge tıklandığında, kullanıcının verdiği dosyaların listesini gösteren bir pop-up açılır erişim. Kullanıcı dilerse bu erişimi her zaman iptal edebilir.
İzin kalıcılığı
Web uygulaması, dosyanın tüm sekmelerine kadar istemde bulunmadan dosyadaki değişiklikleri kaydetmeye devam edebilir kaynak kapalı. Bir sekme kapatıldığında site tüm erişimi kaybeder. Kullanıcı web uygulamasında dosyalara erişmeleri yeniden istenir.
Geri bildirim
File System Access API ile ilgili deneyimlerinizi öğrenmek isteriz.
Bize API tasarımı hakkında bilgi verin
API'de beklediğiniz gibi çalışmayan bir şey mi var? Veya eksik yöntemler mi var? gereken özellikler veya özellikler neler olabilir? Menkul kıymetle ilgili bir sorunuz veya yorumunuz varsa modeli nedir?
- WICG Dosya Sistemine Erişme GitHub deposunda spesifikasyon sorunu bildirin veya düşüncelerinizi ekleyin bir sorundur.
Uygulamayla ilgili bir sorun mu var?
Chrome'un uygulanmasıyla ilgili bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı?
- https://new.crbug.com adresinden hata bildiriminde bulunun. Açıklamalarınızı mümkün oldukça detaylandırmaya çalışın.
yeniden oluşturma talimatlarını ve Bileşenler'i
Blink>Storage>FileSystem
olarak ayarlayın. Glitch, hızlı tekrarlar paylaşmak için idealdir.
API'yi kullanmayı mı planlıyorsunuz?
Sitenizde File System Access API'yi kullanmayı mı planlıyorsunuz? Herkese açık desteğiniz, öncelik vermemize ve diğer tarayıcı tedarikçilerine söz konusu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.
- Bu özelliği nasıl kullanmayı planladığınızı WICG Discourse ileti dizisinde paylaşın.
- Hashtag'i kullanarak @ChromiumDev hesabına tweet gönderin
#FileSystemAccess
ve bize bildirin.
Faydalı bağlantılar
- Herkese açık açıklayıcı
- Dosya Sistemi Erişim özellikleri ve Dosya spesifikasyonu
- Hata izleme
- ChromeStatus.com girişi
- TypeScript tanımları
- File System Access API - Chromium Güvenlik Modeli
- Blink Bileşeni:
Blink>Storage>FileSystem
Teşekkür
File System Access API spesifikasyonunu yazan: Marijn Kruisselbrink