您好,登錄后才能下訂單哦!
小編給大家分享一下HTML5文件操作API的方法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
如果網(wǎng)絡(luò)應(yīng)用能夠讀取和寫入文件與目錄,將會(huì)非常方便。從離線轉(zhuǎn)移到在線后,應(yīng)用變得更加復(fù)雜,而文件系統(tǒng)方面的API的缺乏也一直阻礙著網(wǎng)絡(luò)前進(jìn)。存儲(chǔ)二進(jìn)制數(shù)據(jù)或與其進(jìn)行交互不應(yīng)局限于桌面。令人欣慰的是,由于FileSystemAPI的出現(xiàn),這一現(xiàn)狀終于得到了改變。有了FileSystemAPI,網(wǎng)絡(luò)應(yīng)用就可以創(chuàng)建、讀取、導(dǎo)航用戶本地文件系統(tǒng)中的沙盒部分以及向其中寫入數(shù)據(jù)。
API 被分為以下不同的主題:
讀取和處理文件:File
/Blob
、FileList
、FileReader
創(chuàng)建和寫入:BlobBuilder
、FileWriter
目錄和文件系統(tǒng)訪問(wèn):DirectoryReader
、FileEntry
/DirectoryEntry
、LocalFileSystem
在寫這篇文章時(shí),只有 GoogleChrome 瀏覽器可以實(shí)施此FileSystemAPI。目前尚不存在專門用于文件/配額管理的瀏覽器用戶界面。要在用戶的系統(tǒng)上存儲(chǔ)數(shù)據(jù),您的應(yīng)用可能需要請(qǐng)求配額。不過(guò),可使用--unlimited-quota-for-files
標(biāo)記運(yùn)行Chrome瀏覽器進(jìn)行測(cè)試。此外,如果您要開發(fā)的是用于Chrome網(wǎng)上應(yīng)用店的應(yīng)用或擴(kuò)展程序,可使用unlimitedStorage
清單文件權(quán)限,而無(wú)需請(qǐng)求配額。最后,用戶會(huì)收到授予、拒絕或?yàn)閼?yīng)用增加存儲(chǔ)的權(quán)限對(duì)話框。
如果您要通過(guò) file://
調(diào)試您的應(yīng)用,可能需要--allow-file-access-from-files
標(biāo)記。不使用這些標(biāo)記會(huì)導(dǎo)致SECURITY_ERR
或QUOTA_EXCEEDED_ERR
FileError。
網(wǎng)絡(luò)應(yīng)用可通過(guò)調(diào)用 window.requestFileSystem()請(qǐng)求對(duì)沙盒文件系統(tǒng)的訪問(wèn)權(quán)限:
// Note: The file system has been prefixed as of Google Chrome 12: window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(type, size, successCallback, opt_errorCallback)
type
文件存儲(chǔ)是否應(yīng)該是持久的??赡艿闹蛋╳indow.TEMPORARY和window.PERSISTENT。通過(guò)TEMPORARY存儲(chǔ)的數(shù)據(jù)可由瀏覽器自行決定刪除(例如在需要更多空間的情況下)。要清除PERSISTENT存儲(chǔ),必須獲得用戶或應(yīng)用的明確授權(quán),并且需要用戶向您的應(yīng)用授予配額。請(qǐng)參閱請(qǐng)求配額。
size
應(yīng)用需要用于存儲(chǔ)的大?。ㄒ宰止?jié)為單位)。
successCallback
文件系統(tǒng)請(qǐng)求成功時(shí)調(diào)用的回調(diào)。其參數(shù)為 FileSystem對(duì)象。
opt_errorCallback
用于處理錯(cuò)誤或獲取文件系統(tǒng)的請(qǐng)求遭到拒絕時(shí)可選的回調(diào)。其參數(shù)為FileError對(duì)象。
如果您是首次調(diào)用requestFileSystem(),系統(tǒng)會(huì)為您的應(yīng)用創(chuàng)建新的存儲(chǔ)。請(qǐng)注意,這是沙箱文件系統(tǒng),也就是說(shuō),一個(gè)網(wǎng)絡(luò)應(yīng)用無(wú)法訪問(wèn)另一個(gè)應(yīng)用的文件。這也意味著您無(wú)法在用戶硬盤上的任意文件夾(例如“我的圖片”、“我的文檔”等)中讀/寫文件。
用法示例:
function onInitFs(fs) { console.log('Opened file system: ' + fs.name);} window.requestFileSystem(window.TEMPORARY, 5*1024*1024 /*5MB*/, onInitFs, errorHandler);
FileSystem 規(guī)范還定義了計(jì)劃用于WebWorkers的同步API(LocalFileSystemSync)接口。不過(guò),本教程不涉及該同步API。
在本文檔的其余部分中,我們將使用相同的處理程序處理異步調(diào)用引發(fā)的錯(cuò)誤:
function errorHandler(e) { var msg = ''; switch (e.code) { case FileError.QUOTA_EXCEEDED_ERR: msg = 'QUOTA_EXCEEDED_ERR'; break; case FileError.NOT_FOUND_ERR: msg = 'NOT_FOUND_ERR'; break; case FileError.SECURITY_ERR: msg = 'SECURITY_ERR'; break; case FileError.INVALID_MODIFICATION_ERR: msg = 'INVALID_MODIFICATION_ERR'; break; case FileError.INVALID_STATE_ERR: msg = 'INVALID_STATE_ERR'; break; default: msg = 'Unknown Error'; break; }; console.log('Error: ' + msg); }
解的訊息。請(qǐng)求存儲(chǔ)配額要使用 PERSISTENT 存儲(chǔ),您必須向用戶取得存儲(chǔ)持久數(shù)據(jù)的許可。由于瀏覽器可自行決定刪除臨時(shí)存儲(chǔ)的數(shù)據(jù),因此這一限制不適用于 TEMPORARY 存儲(chǔ)。為了將 PERSISTENT 存儲(chǔ)與 FileSystem API 配合使用,Chrome 瀏覽器使用基于 window.webkitStorageInfo 的新 API 以請(qǐng)求存儲(chǔ):
window.webkitStorageInfo.requestQuota(PERSISTENT, 1024*1024, function(grantedBytes) { window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler); }, function(e) { console.log('Error', e); });
用戶授予許可后,就不必再調(diào)用 requestQuota() 了。后續(xù)調(diào)用為無(wú)操作指令。您還可以使用 API 查詢?cè)吹漠?dāng)前配額使用情況和分配情況:window.webkitStorageInfo.queryUsageAndQuota()使用文件沙盒環(huán)境中的文件通過(guò) FileEntry 接口表示。FileEntry 包含標(biāo)準(zhǔn)文件系統(tǒng)中會(huì)有的屬性類型(name、isFile...)和方法(remove、moveTo、copyTo...)。FileEntry 的屬性和方法:
fileEntry.isFile === true fileEntry.isDirectory === false fileEntry.name fileEntry.fullPath ... fileEntry.getMetadata(successCallback, opt_errorCallback); fileEntry.remove(successCallback, opt_errorCallback); fileEntry.moveTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.copyTo(dirEntry, opt_newName, opt_successCallback, opt_errorCallback); fileEntry.getParent(successCallback, opt_errorCallback); fileEntry.toURL(opt_mimeType); fileEntry.file(successCallback, opt_errorCallback); fileEntry.createWriter(successCallback, opt_errorCallback); ...
為了更好地理解 FileEntry,本部分還提供了執(zhí)行常規(guī)任務(wù)的眾多技巧。創(chuàng)建文件您可以使用文件系統(tǒng)的 getFile()(DirectoryEntry 接口的一種方法)查找或創(chuàng)建文件。請(qǐng)求文件系統(tǒng)后,系統(tǒng)會(huì)向成功回調(diào)傳遞FileSystem 對(duì)象,其中包含指向該應(yīng)用相應(yīng)文件系統(tǒng)的根的 DirectoryEntry (fs.root)。以下代碼會(huì)在該應(yīng)用相應(yīng)文件系統(tǒng)的根中創(chuàng)建名為“l(fā)og.txt”的空白文件:
function onInitFs(fs) { fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) { // fileEntry.isFile === true // fileEntry.name == 'log.txt' // fileEntry.fullPath == '/log.txt' }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
請(qǐng)求文件系統(tǒng)后,系統(tǒng)會(huì)向成功處理程序傳遞 FileSystem 對(duì)象。我們可以將回調(diào)中的 fs.root.getFile() 命名為要?jiǎng)?chuàng)建的文件的文件名。您可以傳遞絕對(duì)路徑或相對(duì)路徑,但該路徑必須有效。例如,如果您嘗試創(chuàng)建一個(gè)其直接父級(jí)文件不存在的文件,將會(huì)導(dǎo)致出錯(cuò)。getFile() 的第二個(gè)參數(shù)是在文件不存在時(shí)從字面上說(shuō)明函數(shù)行為的對(duì)象。在此示例中,create: true 會(huì)在文件不存在時(shí)創(chuàng)建文件,并在文件存在時(shí) (exclusive: true) 引發(fā)錯(cuò)誤。如果 create: false,系統(tǒng)只會(huì)獲取并返回文件。無(wú)論是哪種情況,系統(tǒng)都不會(huì)覆蓋文件內(nèi)容,因?yàn)槲覀冎皇谦@取相關(guān)文件的引用路徑。通過(guò)名稱讀取文件以下代碼會(huì)檢索名為“l(fā)og.txt”的文件,并使用 FileReader API 讀取文件內(nèi)容,然后將其附加到頁(yè)面上新的 <textarea>。如果 log.txt 不存在,系統(tǒng)將引發(fā)錯(cuò)誤。
function onInitFs(fs) { fs.root.getFile('log.txt', {}, function(fileEntry) { // Get a File object representing the file, // then use FileReader to read its contents. fileEntry.file(function(file) { var reader = new FileReader(); reader.onloadend = function(e) { var txtArea = document.createElement('textarea'); txtArea.value = this.result; document.body.appendChild(txtArea); }; reader.readAsText(file); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
寫入到文件以下代碼會(huì)創(chuàng)建名為“l(fā)og.txt”的空白文件(如果該文件不存在),并在文件中填入“Lorem Ipsum”文字。
function onInitFs(fs) { fs.root.getFile('log.txt', {create: true}, function(fileEntry) { // Create a FileWriter object for our FileEntry (log.txt). fileEntry.createWriter(function(fileWriter) { fileWriter.onwriteend = function(e) { console.log('Write completed.'); }; fileWriter.onerror = function(e) { console.log('Write failed: ' + e.toString()); }; // Create a new Blob and write it to log.txt. var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12. bb.append('Lorem Ipsum'); fileWriter.write(bb.getBlob('text/plain')); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
此時(shí),我們會(huì)調(diào)用 FileEntry 的 createWriter() 方法獲取 FileWriter 對(duì)象。在成功回調(diào)中為error 事件和 writeend 事件設(shè)置事件處理程序。通過(guò)以下操作將文字?jǐn)?shù)據(jù)寫入文件:創(chuàng)建 Blob,向 Blob 附加文字,然后將 Blob 傳遞到FileWriter.write()。向文件附加文字以下代碼會(huì)將“Hello World”文字附加到日志文件結(jié)尾。如果該文件不存在,系統(tǒng)將引發(fā)錯(cuò)誤。
function onInitFs(fs) { fs.root.getFile('log.txt', {create: false}, function(fileEntry) { // Create a FileWriter object for our FileEntry (log.txt). fileEntry.createWriter(function(fileWriter) { fileWriter.seek(fileWriter.length); // Start write position at EOF. // Create a new Blob and write it to log.txt. var bb = new BlobBuilder(); // Note: window.WebKitBlobBuilder in Chrome 12. bb.append('Hello World'); fileWriter.write(bb.getBlob('text/plain')); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
以下代碼可讓用戶使用 <input type="file" multiple />
選擇多個(gè)文件,并在應(yīng)用的沙盒文件系統(tǒng)中復(fù)制這些文件。
<input type="file" id="myfile" multiple /> document.querySelector('#myfile').onchange = function(e) { var files = this.files; window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { // Duplicate each file the user selected to the app's fs. for (var i = 0, file; file = files[i]; ++i) { // Capture current iteration's file in local scope for the getFile() callback. (function(f) { fs.root.getFile(file.name, {create: true, exclusive: true}, function(fileEntry) { fileEntry.createWriter(function(fileWriter) { fileWriter.write(f); // Note: write() can take a File or Blob object. }, errorHandler); }, errorHandler); })(file); } }, errorHandler); };
雖然我們通過(guò)輸入導(dǎo)入文件,您也可以使用 HTML5 拖放功能輕松實(shí)現(xiàn)相同的目標(biāo)。
正如評(píng)論中所說(shuō)的,F(xiàn)ileWriter.write() 可接受 Blob 或 File。這是因?yàn)?File 繼承自 Blob,所以文件對(duì)象也是 Blob。
以下代碼會(huì)刪除“l(fā)og.txt”文件。
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getFile('log.txt', {create: false}, function(fileEntry) { fileEntry.remove(function() { console.log('File removed.'); }, errorHandler); }, errorHandler); }, errorHandler);
沙盒中的目錄通過(guò) DirectoryEntry
接口表示,該接口共享了 FileEntry 的大部分屬性(繼承自常用 Entry
接口)。不過(guò),DirectoryEntry
還可使用其他方法處理目錄。
DirectoryEntry
的屬性和方法:
dirEntry.isDirectory === true // See the section on FileEntry for other inherited properties/methods. ... var dirReader = dirEntry.createReader(); dirEntry.getFile(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.getDirectory(path, opt_flags, opt_successCallback, opt_errorCallback); dirEntry.removeRecursively(successCallback, opt_errorCallback); ...
使用 DirectoryEntry
的 getDirectory()
方法讀取或創(chuàng)建目錄。您可以遞交名稱或路徑作為查找或創(chuàng)建所用的目錄。
例如,以下代碼會(huì)在根目錄中創(chuàng)建名為“MyPictures”的目錄:
[html] view plaincopy window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getDirectory('MyPictures', {create: true}, function(dirEntry) { ... }, errorHandler); }, errorHandler);
創(chuàng)建子目錄的方法與創(chuàng)建其他任何目錄的方法完全相同。不過(guò),如果您嘗試創(chuàng)建其直接父目錄不存在的目錄,API 將引發(fā)錯(cuò)誤。相應(yīng)的解決方法是,依次創(chuàng)建各級(jí)目錄,而這對(duì)異步 API 而言非常麻煩。
以下代碼會(huì)在系統(tǒng)創(chuàng)建父文件夾后以遞歸方式添加各個(gè)子文件夾,從而在應(yīng)用相應(yīng) FileSystem 的根中創(chuàng)建新的層次結(jié)構(gòu) (music/genres/jazz)。
[html] view plaincopy var path = 'music/genres/jazz/'; function createDir(rootDirEntry, folders) { // Throw out './' or '/' and move on to prevent something like '/foo/.//bar'. if (folders[0] == '.' || folders[0] == '') { folders = folders.slice(1); } rootDirEntry.getDirectory(folders[0], {create: true}, function(dirEntry) { // Recursively add the new subfolder (if we still have another to create). if (folders.length) { createDir(dirEntry, folders.slice(1)); } }, errorHandler); }; function onInitFs(fs) { createDir(fs.root, path.split('/')); // fs.root is a DirectoryEntry. } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
在“music/genres/jazz”處于合適的位置后,我們就可以將完整路徑傳遞到 getDirectory()
,然后在其下方創(chuàng)建新的子文件夾。例如:
window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getFile('/music/genres/jazz/song.mp3', {create: true}, function(fileEntry) { ... }, errorHandler); }, errorHandler);
要讀取目錄的內(nèi)容,可先創(chuàng)建 DirectoryReader
,然后調(diào)用 readEntries()
方法。我們不能保證所有目錄條目都能在僅調(diào)用一次 readEntries()
的情況下同時(shí)返回。也就是說(shuō),您需要一直調(diào)用 DirectoryReader.readEntries()
,直到系統(tǒng)不再返回結(jié)果為止。以下代碼對(duì)此作了說(shuō)明:
[html] view plaincopy <ul id="filelist"></ul> function toArray(list) { return Array.prototype.slice.call(list || [], 0); } function listResults(entries) { // Document fragments can improve performance since they're only appended // to the DOM once. Only one browser reflow occurs. var fragment = document.createDocumentFragment(); entries.forEach(function(entry, i) { var img = entry.isDirectory ? '<img src="folder-icon.gif">' : '<img src="file-icon.gif">'; var li = document.createElement('li'); li.innerHTML = [img, '<span>', entry.name, '</span>'].join(''); fragment.appendChild(li); }); document.querySelector('#filelist').appendChild(fragment); } function onInitFs(fs) { var dirReader = fs.root.createReader(); var entries = []; // Call the reader.readEntries() until no more results are returned. var readEntries = function() { dirReader.readEntries (function(results) { if (!results.length) { listResults(entries.sort()); } else { entries = entries.concat(toArray(results)); readEntries(); } }, errorHandler); }; readEntries(); // Start reading dirs. } window.requestFileSystem(window.TEMPORARY, 1024*1024, onInitFs, errorHandler);
DirectoryEntry.remove()
方法的行為與 FileEntry
相應(yīng)方法的行為非常相似。差別在于:嘗試刪除非空目錄時(shí)會(huì)引發(fā)錯(cuò)誤。
以下代碼會(huì)從“/music/genres/”刪除空的“jazz”目錄:
[html] view plaincopy window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getDirectory('music/genres/jazz', {}, function(dirEntry) { dirEntry.remove(function() { console.log('Directory removed.'); }, errorHandler); }, errorHandler); }, errorHandler);
如果您不需要某個(gè)包含條目的目錄,不妨使用 removeRecursively()
。該方法將以遞歸方式刪除目錄及其內(nèi)容。
以下代碼會(huì)以遞歸方式刪除“music”目錄及其包含的所有文件和目錄:
[html] view plaincopy window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { fs.root.getDirectory('/misc/../music', {}, function(dirEntry) { dirEntry.removeRecursively(function() { console.log('Directory removed.'); }, errorHandler); }, errorHandler); }, errorHandler);
FileEntry
和 DirectoryEntry
享有共同的操作。
FileEntry
和 DirectoryEntry
均可使用 copyTo()
復(fù)制現(xiàn)有條目。該方法會(huì)自動(dòng)以遞歸方式復(fù)制文件夾。
以下代碼示例會(huì)將“me.png”文件從一個(gè)目錄復(fù)制到另一個(gè)目錄:
[html] view plaincopy function copy(cwd, src, dest) { cwd.getFile(src, {}, function(fileEntry) { cwd.getDirectory(dest, {}, function(dirEntry) { fileEntry.copyTo(dirEntry); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { copy(fs.root, '/folder1/me.png', 'folder2/mypics/'); }, errorHandler);
FileEntry
和 DirectoryEntry
的 moveTo()
方法可讓您移動(dòng)或重命名文件或目錄。其第一個(gè)參數(shù)是文件要移動(dòng)到的目標(biāo)父目錄,其第二個(gè)參數(shù)是文件可選的新名稱。如未提供新名稱,系統(tǒng)將使用文件的原名稱。
以下示例將“me.png”重命名為“you.png”,但并不移動(dòng)該文件:
[html] view plaincopy function rename(cwd, src, newName) { cwd.getFile(src, {}, function(fileEntry) { fileEntry.moveTo(cwd, newName); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { rename(fs.root, 'me.png', 'you.png'); }, errorHandler); 以下示例將“me.png”(位于根目錄中)移動(dòng)到名為“newfolder”的文件夾。 function move(src, dirName) { fs.root.getFile(src, {}, function(fileEntry) { fs.root.getDirectory(dirName, {}, function(dirEntry) { fileEntry.moveTo(dirEntry); }, errorHandler); }, errorHandler); } window.requestFileSystem(window.TEMPORARY, 1024*1024, function(fs) { move('/me.png', 'newfolder/'); }, errorHandler);
FileSystem API 使用新的網(wǎng)址機(jī)制,(即 filesystem:),可用于填充 src 或 href 屬性。例如,如果您要顯示某幅圖片且擁有相應(yīng)的 fileEntry,您可以調(diào)用 toURL() 獲取該文件的 filesystem: 網(wǎng)址:
var img = document.createElement('img'); img.src = fileEntry.toURL(); // filesystem:http://example.com/temporary/myfile.png document.body.appendChild(img);
另外,如果您已具備 filesystem: 網(wǎng)址,可使用 resolveLocalFileSystemURL() 找回 fileEntry:
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL; var url = 'filesystem:http://example.com/temporary/myfile.png'; window.resolveLocalFileSystemURL(url, function(fileEntry) { ... });
以上是“HTML5文件操作API的方法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。