2. 程式人生 > >file外掛的使用詳解（檔案的建立、讀寫，資料夾建立等）

file外掛的使用詳解（檔案的建立、讀寫，資料夾建立等）

阿新 • • 發佈：2019-01-27
Cordova 提供了一個 file 外掛，通過這個外掛我們很方便地實現在各種裝置下對檔案、和資料夾進行訪問，編輯等各種操作。 

一、新增File外掛
首先我們要在“終端”中進入工程所在的目錄，然後執行如下命令新增 file 外掛：
1 cordova plugin add cordova-plugin-file

二、普通檔案的讀取與寫入
1，檔案寫入（持久化儲存）
在iOS中，下面程式碼會將檔案寫入到 Documents 目錄（應用程式使用者文件目錄）下： 
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //建立並寫入檔案
            function createAndWriteFile(){
              //持久化資料儲存
              window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
 
                console.log('開啟的檔案系統: ' + fs.name);
                fs.root.getFile("hangge.txt", { create: true, exclusive: false },
                 function (fileEntry) {
 
                    console.log("是否是個檔案？" + fileEntry.isFile.toString());
                    // fileEntry.name == 'hangge.txt'
                    // fileEntry.fullPath == '/hangge.txt'
                    //檔案內容
                    var dataObj = new Blob(['歡迎訪問hangge.com'], { type: 'text/plain' });
                    //寫入檔案
                    writeFile(fileEntry, null);
 
                }, onErrorCreateFile);
 
              }, onErrorLoadFs);
            }
 
            //將內容資料寫入到檔案中
            function writeFile(fileEntry, dataObj) {
                //建立一個寫入物件
                fileEntry.createWriter(function (fileWriter) {
 
                    //檔案寫入成功
                    fileWriter.onwriteend = function() {
                        console.log("Successful file read...");
                    };
 
                    //檔案寫入失敗
                    fileWriter.onerror = function (e) {
                        console.log("Failed file read: " + e.toString());
                    };
                     
                    //寫入檔案
                    fileWriter.write(dataObj);
                });
            }
 
            //檔案建立失敗回撥
            function  onErrorCreateFile(error){
              console.log("檔案建立失敗！")
            }
 
            //FileSystem載入失敗回撥
            function  onErrorLoadFs(error){
              console.log("檔案系統載入失敗！")
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="createAndWriteFile();">建立並寫入檔案</button>
    </body>
</html>


可以看到 hangge.txt 檔案建立成功，開啟后里面內容也寫入成功。
2，持久化檔案儲存路徑設定：iOS平臺
在 config.xml 檔案中，我們可以配置修改持久話化檔案儲存位置（Persistent storage location）。
如何不配置的話，從前面樣例可以看到。預設是儲存在程式的 Documents 檔案目錄下，也就是如下配置： 
<preference name="iosPersistentFileLocation" value="Compatibility" />

但儲存在這裡有個副作用，就是使用 iTunes 可以看到這些檔案。如果要持久化儲存很多檔案，又不希望和普通使用者檔案混起來。我們可以修改成如下配置： 
<preference name="iosPersistentFileLocation" value="Library" />

可以看到檔案儲存到應用的 Library 資料夾下了:
3，持久化檔案儲存路徑設定：Android平臺
同樣的，我們也可以在 config.xml 檔案中配置修改 Android 裝置中持久化檔案儲存位置（Persistent storage location）。 如果不配置，或者進行如下配置的話。持久化檔案是儲存在/data/data/<packageId> 下面。  
<preference name="AndroidPersistentFileLocation" value="Internal" />

修改成如下配置的話，如果裝置有SD卡（或等效的儲存分割槽）。那麼永續性檔案將被儲存在該空間的根路徑下。 
<preference name="AndroidPersistentFileLocation" value="Compatibility" />

4，建立臨時檔案（將檔案寫入到臨時資料夾下） 在iOS系統中，下面程式碼會將檔案寫入到 tmp 目錄下。當系統空間不足或是資源不足的時候，臨時檔案會被系統刪除。 同上面的樣例相比，這裡只改了一個地方（高亮處）。 
//建立並寫入檔案
function createAndWriteFile(){
  //臨時資料儲存
  window.requestFileSystem(LocalFileSystem.TEMPORARY, 5 * 1024 * 1024, function (fs) {
 
    console.log('開啟的檔案系統: ' + fs.name);
    fs.root.getFile("hangge.txt", { create: true, exclusive: false },
     function (fileEntry) {
 
        console.log("是否是個檔案？" + fileEntry.isFile.toString());
        // fileEntry.name == 'hangge.txt'
        // fileEntry.fullPath == '/hangge.txt'
        //檔案內容
        var dataObj = new Blob(['歡迎訪問hangge.com'], { type: 'text/plain' });
        //寫入檔案
        writeFile(fileEntry, dataObj);
 
    }, onErrorCreateFile);
 
  }, onErrorLoadFs);
}

5，檔案末尾寫入新內容
下面改造下 writeFile() 方法，增加一個 isAppend 引數。用來表示資料寫入是完全覆蓋，還是追加（append）到末尾。
//將內容資料寫入到檔案中（支援追加內容）
function writeFile(fileEntry, dataObj, isAppend) {
    //建立一個寫入物件
    fileEntry.createWriter(function (fileWriter) {
 
        //檔案寫入成功
        fileWriter.onwriteend = function() {
            console.log("Successful file read...");
        };
 
        //檔案寫入失敗
        fileWriter.onerror = function (e) {
            console.log("Failed file read: " + e.toString());
        };
 
        //如果是最加內容，則定位到檔案尾部
        if (isAppend) {
            try {
                fileWriter.seek(fileWriter.length);
            }
            catch (e) {
                console.log("file doesn't exist!");
            }
        }
        fileWriter.write(dataObj);
    });
}

使用方式如下： 
var dataObj = new Blob(['\n值得您每天來看看！'], { type: 'text/plain' });
writeFile(fileEntry, dataObj, true);

6，讀取檔案
下面將之前建立的 hangge.txt 檔案中的內容讀取出來，並顯示。
下面 readFile() 方法接收傳入的 FileEntry 物件，並讀取物件內容。 
//讀取檔案
function readFile(fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();
        reader.onloadend = function() {
            alert(this.result);
        };
        reader.readAsText(file);
    }, onErrorReadFile);
}
 
//讀取檔案失敗響應
function onErrorReadFile(){
  console.log("檔案讀取失敗!");
}


三、資料夾操作 下面程式碼在 Documents 目錄（應用程式使用者文件目錄）下建立子資料夾：assets/images 
//建立並寫入檔案
function createAndWriteFile(){
  //臨時資料儲存
  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
 
    console.log('開啟的檔案系統: ' + fs.name);
    fs.root.getDirectory('assets', { create: true }, function (dirEntry) {
        dirEntry.getDirectory('images', { create: true }, function (subDirEntry) {
            //createFile(subDirEntry, "hangge.txt");
        }, onErrorGetDir);
    }, onErrorGetDir);
 
  }, onErrorLoadFs);
}
 
//資料夾建立失敗回撥
function onErrorGetDir(error){
  console.log("資料夾建立失敗！")
}
 
//FileSystem載入失敗回撥
function  onErrorLoadFs(error){
  console.log("檔案系統載入失敗！")
}


四、二進位制檔案（binary file）操作 1，儲存二進位制檔案

下面程式碼從網路上獲取一張圖片，並儲存到本地。

<!DOCTYPE html>

<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //下載圖片
            function downloadImage(){
               
              window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
 
                console.log('開啟的檔案系統: ' + fs.name);
                getSampleFile(fs.root);
 
              }, onErrorLoadFs);
            }
 
            //獲取圖片
            function getSampleFile(dirEntry) {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://www.hangge.com/blog/images/logo.png', true);
                xhr.responseType = 'blob';
 
                xhr.onload = function() {
                    if (this.status == 200) {
                        var blob = new Blob([this.response], { type: 'image/png' });
                        saveFile(dirEntry, blob, "hangge.png");
                    }
                };
                xhr.send();
            }
 
            //儲存圖片檔案
            function saveFile(dirEntry, fileData, fileName) {
                dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {
                    writeFile(fileEntry, fileData);
                }, onErrorCreateFile);
            }
 
            //將圖片資料寫入到檔案中
            function writeFile(fileEntry, dataObj, isAppend) {
              //建立一個寫入物件
              fileEntry.createWriter(function (fileWriter) {
 
                  //檔案寫入成功
                  fileWriter.onwriteend = function() {
                      console.log("Successful file write...");
                      if (dataObj.type == "image/png") {
                          readBinaryFile(fileEntry);
                      }
                      else {
                          readFile(fileEntry);
                      }
                  };
 
                  //檔案寫入失敗
                  fileWriter.onerror = function(e) {
                      console.log("Failed file write: " + e.toString());
                  };
 
                  //寫入檔案
                  fileWriter.write(dataObj);
              });
          }
 
          //檔案建立失敗回撥
          function  onErrorCreateFile(error){
            console.log("檔案建立失敗！")
          }
 
          //FileSystem載入失敗回撥
          function  onErrorLoadFs(error){
            console.log("檔案系統載入失敗！")
          }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="downloadImage();">下載圖片</button>
    </body>
</html>

2，讀取二進位制檔案
下面程式碼讀取前面下載下來的圖片（hangge.png），並在 image 元素中顯示。 
<!DOCTYPE html>
<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //載入圖片
            function loadImage(){
               
              window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
 
                console.log('開啟的檔案系統: ' + fs.name);
                fs.root.getFile("hangge.png", { create: true, exclusive: false },
                 function (fileEntry) {
                    readBinaryFile(fileEntry);
                }, onErrorCreateFile);
 
              }, onErrorLoadFs);
            }
 
            //讀取圖片檔案
            function readBinaryFile(fileEntry) {
                fileEntry.file(function (file) {
                    var reader = new FileReader();
 
                    reader.onloadend = function() {
                        //載入成功顯示圖片
                        var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
                        displayImage(blob);
                    };
 
                    reader.readAsArrayBuffer(file);
 
                }, onErrorReadFile);
            }
 
            //顯示圖片
            function displayImage(blob) {
                var elem = document.getElementById('imageFile');
                elem.src = window.URL.createObjectURL(blob);
            }
 
            //檔案建立失敗回撥
            function  onErrorCreateFile(error){
              console.log("檔案建立失敗！")
            }
 
            //讀取檔案失敗響應
            function onErrorReadFile(){
              console.log("檔案讀取失敗!");
            }
 
            //FileSystem載入失敗回撥
            function  onErrorLoadFs(error){
              console.log("檔案系統載入失敗！")
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="loadImage();">載入圖片</button>
        <image id="imageFile"/>
    </body>
</html>


3，更便捷的顯示圖片辦法
要將裝置中的圖片顯示在頁面上，前面的樣例做法是先的到這個圖片的 FileEntry 物件，然後讀出出 Blob 資料，做最後將 Blob 資料通過 window.URL.createObjectURL() 方法建立個url傳遞給頁面的 img 元素 src。
其實還有更簡單的辦法，得到圖片的 FileEntry 物件後，通過其 toURL() 方法即可將其 url 賦給 img 元素 src 屬性即可。

下面同樣以載入顯示 Documents 目錄下的 hangge.png 圖片為例：

<!DOCTYPE html>

<html>
    <head>
        <title>Capture Photo</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript" charset="utf-8">
            //載入圖片
            function loadImage(){
               
              window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) {
 
                console.log('開啟的檔案系統: ' + fs.name);
                fs.root.getFile("hangge.png", { create: true, exclusive: false },
                 function (fileEntry) {
                    displayImageByFileURL(fileEntry);
                }, onErrorCreateFile);
 
              }, onErrorLoadFs);
            }
 
            //顯示圖片
            function displayImageByFileURL(fileEntry) {
                var elem = document.getElementById('imageFile');
                elem.src = fileEntry.toURL();
            }
 
            //檔案建立失敗回撥
            function  onErrorCreateFile(error){
              console.log("檔案建立失敗！")
            }
 
            //FileSystem載入失敗回撥
            function  onErrorLoadFs(error){
              console.log("檔案系統載入失敗！")
            }
        </script>
    </head>
    <body style="padding-top:50px">
        <button style="font-size:23px;" onclick="loadImage();">載入圖片</button>
        <img id="imageFile"/>
    </body>
</html>

五、使用cdvfile protocol 更快捷地定位到檔案、資料夾

通過 cdvfile 協議，我們可以很方便的訪問裝置檔案、資料夾。

	
cdvfile://localhost/persistent|temporary|another-fs-root*/path/to/file

1，在 html 頁面中直接通過 cdvfile:// 路徑來載入檔案。

還是同上面樣例一樣，在頁面上顯示同一張圖片： 
<img src="cdvfile://localhost/persistent/hangge.png" />
2，複製檔案 
下面將 Documents 目錄下的 hangge.png 複製到 tmp 目錄下，並改名為 temp.png 這裡通過 FileTransfer 物件的 copyTo() 方法進行復制，如果想要實現移動的話則改成 moveTo() 方法即可。 
function copyFile(){
  window.resolveLocalFileSystemURL('cdvfile://localhost/persistent/hangge.png',
    function(fileEntry) {
 
      window.resolveLocalFileSystemURL('cdvfile://localhost/temporary',
        function(dirEntry) {
            fileEntry.copyTo(dirEntry, "temp.png", successCallback, errorCallback);
        },
              function(error){console.log("建立失敗！")});
 
    },
    function(error){console.log("建立失敗！")});
}
 
//檔案複製成功
function  successCallback() {
 console.log("檔案複製成功！")
}
 
//檔案複製失敗
function  errorCallback() {
 console.log("檔案複製失敗！")
}

原文出自：www.hangge.com  原文連結：http://www.hangge.com/blog/cache/detail_1179.html

相關推薦

file外掛的使用詳解（檔案的建立、讀寫，資料夾建立等）

Cordova 提供了一個 file 外掛，通過這個外掛我們很方便地實現在各種裝置下對檔案、和資料夾進行訪問，編輯等各種操作。 一、新增File外掛首先我們要在“終端”中進入工程所在的目錄，然後執行如下命令新增 file 外掛： 1 cordova plug

C/C++堆、棧及靜態資料區詳解（轉載只是為了查閱方便，若侵權立刪）

C/C++堆、棧及靜態資料區詳解 　　本文介紹C/C++中堆，棧及靜態資料區。   　　五大記憶體分割槽 　　在C++中，記憶體分成5個區，他們分別是堆、棧、自由儲存區、全域性/靜態儲存區和常量儲存區。下面分別來介紹： 　　棧，就是那些由編譯器在需要的時候分配，在不需要

malloc和free函式詳解（轉載只是為了查閱方便，若侵權立刪）

malloc和free函式詳解 　　本文介紹malloc和free函式的內容。 　　在C中，對記憶體的管理是相當重要。下面開始介紹這兩個函式：   　　一、malloc()和free()的基本概念以及基本用法： 1、函式原型及說明： void *malloc(lon

curl -l的資訊詳解（這樣還看不懂，就沒天理了）

[[email protected] ~]# curl -I "http://www.baidu.com" HTTP/1.1 200 OK Accept-Ranges: bytes Cache-Control: private, no-cache, no-store, proxy-reva

iCheck表單美化外掛使用方法詳解（含引數、事件等）

iCheck 特色： 1、在不同瀏覽器(包括ie6+)和裝置上都有相同的表現 — 包括 桌面和移動裝置 2、支援觸控裝置 — iOS、Android、BlackBerry、Windows Phone等系統 4、方便定製 — 用HTML 和 CSS 即可為其設定樣式 (多套面板) 5、體積小巧 — gzi

Servlet（10）Http協議、HTTP請求和響應頭及其詳解（檔案下載）

1 HTTP協議 HTTP協議是網際網路上應用最廣泛的一種網路協議。是工作在TCP/IP協議基礎上的，所有的www檔案都必須遵守這個標準。設計HTTP的最初目的是為了提供一種釋出和接受HTML頁面的方法。 HTTP是TCP/IP協議的一個應用層協議，也是we

Mac下Brackets安裝Emmet、Beauty外掛詳解 （步驟配圖）

剛寫完上一篇Sublime安裝外掛，想到Brackets也需要安裝Emmet外掛，於是探索下發現安裝步驟非常簡潔，記錄下 Sublime安裝外掛連結： http://blog.csdn.net/lovechris00/article/details/51678930 下面

幾種排序方法詳解（選擇排序、氣泡排序、插入排序、快速排序）

由於本帖只是闡述幾種排序方法的原理、如何區分以及編寫幾種排序的簡單程式碼，所以直接給定陣列是 a[ ]={6,2,8,5,1}，需要把以上5個數字按升序排列 1. 選擇排序法 （如果不想看解釋分析，直接往後拉看程式碼） 實質： 第一輪：通過對比陣列中前一個元素和後一個元素

java類的幾種關係詳解（有程式碼、有類圖）

前言 知道類的幾種關係也是程式設計的基礎知識，通常我們在軟體設計、架構設計、開發中都需要使用的， 類的關係 一般情況下類的關係分為6種，分別是實現、繼承、依賴、關聯、聚合、組合，下面將這6中關係簡單的分類 （1）is a -->繼承、實現 （2）has a-->關聯、

Nginx反向代理和配置詳解（正向代理、反向代理、負載均衡原理、Nginx反向代理原理和配置講解）

nginx概述 nginx是一款自由的、開源的、高效能的HTTP伺服器和反向代理伺服器；同時也是一個IMAP、POP3、SMTP代理伺服器；nginx可以作為一個HTTP伺服器進行網站的釋出處理，另外nginx可以作為反向代理進行負載均衡的實現。 Nginx是一款開原始碼的高效能HT

Spring 之AOP AspectJ切入點語法詳解（最全面、最詳細。）（轉）

6.5  AspectJ切入點語法詳解 6.5.1  Spring AOP支援的AspectJ切入點指示符        切入點指示符用來指示切入點表示式目的，，在spring AOP中目

struts.xml配置詳解（名稱空間、約束、動態代理）

1、package 元素： 1.1 作用：方便分模組化開發 1.2 屬性： name：必須有。唯一。標識一個包， 好有一定的含義。 extends：繼承。一般要求必須繼承struts-default的包。不繼承該包，將無法使用struts2提供的一些核心功能。stru

Oracle的連線詳解（左連線、右連線、全連線...）

1  說明： 提到資料庫必須要知道聯接操作，這部分的內容在資料庫查詢操作中佔到舉足輕重的地位，今天我就來說說這些聯結操作。 聯接操作可以在WHERE中指定，也可以在FROM子句中指定，在FROM子句中指定聯接條件時，SQL2將聯接操作符分為聯接型別和聯接條件兩

mysql 資料庫Event定時任務使用詳解（Navicat 建立）

一、使用Navicat建立Event 1、建立一個儲存過程讓定時任務Event呼叫： 開啟Navicat查詢介面：     在上述儲存過程中將自定義的sql語句填寫到BEGIN與END之間。 CREATE DEFINER=`root`@`%`

TCP協議詳解（TCP報文、三次握手、四次揮手、TIME_WAIT狀態、滑動視窗、擁塞控制、粘包問題、狀態轉換圖）

一、TCP報文 【重要的欄位】： 序號：Seq序號，佔32位，用來標識從TCP源端向目的端傳送的位元組流，發起方傳送資料時對此進行標記； 確認序號：Ack序號，佔32位，只有ACK標誌位為1時，確

MySQL中鎖詳解（行鎖、表鎖、頁鎖、悲觀鎖、樂觀鎖等）

原文地址：http://blog.csdn.net/mysteryhaohao/article/details/51669741 鎖，在現實生活中是為我們想要隱藏於外界所使用的一種工具。在計算機中，是協調多個程序或執行緒併發訪問某一資源的一種機制。在資料庫當中，除了傳統

Nginx詳解（正向代理、反向代理、負載均衡原理、ginx反向代理原理和配置講解

nginx概述 nginx是一款自由的、開源的、高效能的HTTP伺服器和反向代理伺服器；同時也是一個IMAP、POP3、SMTP代理伺服器；nginx可以作為一個HTTP伺服器進行網站的釋出處理，另外nginx可以作為反向代理進行負載均衡的實現。 這裡主要通過三

Mysql鎖詳解（行鎖、表鎖、意向鎖、Gap鎖、插入意向鎖）

鎖：對 “某種範圍” 的資料上 “某種鎖” 1.“某種範圍”：行、表 2.“某種鎖” 2.1 共享鎖Shared Locks（S鎖） 1、相容性：加了S鎖的記錄，允許其他事務再加S鎖，不允許其他事務再加X鎖 2、加鎖方式：select…lock in share

Feature Selection詳解（附帶Relief、Relief-F、LVM詳解）（二）

Feature Selection詳解 第二十六次寫部落格，本人數學基礎不是太好，如果有幸能得到讀者指正，感激不盡，希望能借此機會向大家學習。這一篇承接上一篇《Feature Selection詳解（附帶Relief、Relief-F、LVM詳解）（一）》的內容，仍然是針對特

Feature Selection詳解（附帶Relief、Relief-F、LVM詳解）（一）

Feature Selection詳解 第二十五次寫部落格，本人數學基礎不是太好，如果有幸能得到讀者指正，感激不盡，希望能借此機會向大家學習。這一篇主要是針對特徵選擇問題的幾種常見方法進行闡述，並介紹其中幾種比較經典的特徵選擇演算法（Relief、Relief-F、LVM）。