Cordova 提供了一个
file 插件，通过这个插件我们很方便地实现在各种设备下对文件、和文件夹进行访问，编辑等各种操作。
一、添加File插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加 file 插件：
二、普通文件的读取与写入
修改成如下配置的话，如果设备有SD卡（或等效的存储分区）。那么持久性文件将被存储在该空间的根路径下。
5，文件末尾写入新内容
下面改造下 writeFile() 方法，增加一个 isAppend 参数。用来表示数据写入是完全覆盖，还是追加（ append）到末尾。
使用方式如下：
6，读取文件
下面将之前创建的 hangge.txt 文件中的内容读取出来，并显示。
下面 readFile() 方法接收传入的 FileEntry 对象，并读取对象内容。
三、文件夹操作
四、二进制文件（binary file）操作
1，保存二进制文件
下面代码从网络上获取一张图片，并保存到本地。
2，读取二进制文件
下面代码读取前面下载下来的图片（ hangge.png），并在 image 元素中显示。
3，更便捷的显示图片办法
要将设备中的图片显示在页面上，前面的样例做法是先的到这个图片的 FileEntry 对象，然后读出出 Blob 数据，做最后将 Blob 数据通过 window.URL.createObjectURL() 方法创建个url传递给页面的 img 元素 src。
其实还有更简单的办法，得到图片的 FileEntry 对象后，通过其 toURL() 方法即可将其 url 赋给 img 元素 src 属性即可。
下面同样以加载显示 Documents 目录下的 hangge.png 图片为例：
五、使用cdvfile protocol 更快捷地定位到文件、文件夹
通过 cdvfile 协议，我们可以很方便的访问设备文件、文件夹。
1，在 html 页面中直接通过 cdvfile:// 路径来加载文件。
2，复制文件
下面将 Documents 目录下的 hangge.png 复制到 tmp 目录下，并改名为 temp.png
一、添加File插件
首先我们要在“终端”中进入工程所在的目录，然后运行如下命令添加 file 插件：
|
1
|
cordova plugin add cordova-plugin-file
|
二、普通文件的读取与写入
1，文件写入（持久化保存）
在iOS中，下面代码会将文件写入到 Documents 目录（应用程序用户文档目录）下：
可以看到
hangge.txt 文件创建成功，打开后里面内容也写入成功。
2，持久化文件保存路径设置：iOS平台
在 config.xml 文件中，我们可以配置修改持久话化文件保存位置（ Persistent storage location）。
如何不配置的话，从前面样例可以看到。默认是保存在程序的 Documents 文件目录下，也就是如下配置：
但保存在这里有个副作用，就是使用
iTunes 可以看到这些文件。如果要持久化保存很多文件，又不希望和普通用户文件混起来。我们可以修改成如下配置：
可以看到文件保存到应用的
Library 文件夹下了:
3，持久化文件保存路径设置：Android平台
同样的，我们也可以在 config.xml 文件中配置修改 Android 设备中持久化文件保存位置（ Persistent storage location）。
在iOS中，下面代码会将文件写入到 Documents 目录（应用程序用户文档目录）下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!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>
|
2，持久化文件保存路径设置：iOS平台
在 config.xml 文件中，我们可以配置修改持久话化文件保存位置（ Persistent storage location）。
如何不配置的话，从前面样例可以看到。默认是保存在程序的 Documents 文件目录下，也就是如下配置：
|
1
|
<
preference
name
=
"iosPersistentFileLocation"
value
=
"Compatibility"
/>
|
|
1
|
<
preference
name
=
"iosPersistentFileLocation"
value
=
"Library"
/>
|
同样的，我们也可以在 config.xml 文件中配置修改 Android 设备中持久化文件保存位置（ Persistent storage location）。
如果不配置，或者进行如下配置的话。持久化文件是保存在
/data/data/<packageId> 下面。
|
1
|
<
preference
name
=
"AndroidPersistentFileLocation"
value
=
"Internal"
/>
|
|
1
|
<
preference
name
=
"AndroidPersistentFileLocation"
value
=
"Compatibility"
/>
|
4，创建临时文件（将文件写入到临时文件夹下）
在iOS系统中，下面代码会将文件写入到
tmp 目录下。当系统空间不足或是资源不足的时候，临时文件会被系统删除。
同上面的样例相比，这里只改了一个地方（高亮处）。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//创建并写入文件
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）到末尾。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
//将内容数据写入到文件中（支持追加内容）
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);
});
}
|
|
1
2
|
var
dataObj =
new
Blob([
'\n值得您每天来看看！'
], { type:
'text/plain'
});
writeFile(fileEntry, dataObj,
true
);
|
6，读取文件
下面将之前创建的 hangge.txt 文件中的内容读取出来，并显示。
下面 readFile() 方法接收传入的 FileEntry 对象，并读取对象内容。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//读取文件
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//创建并写入文件
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!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.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 元素中显示。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<!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 图片为例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!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 协议，我们可以很方便的访问设备文件、文件夹。
|
1
|
cdvfile:
//localhost/persistent|temporary|another-fs-root*/path/to/file
|
还是同上面样例一样，在页面上显示同一张图片：
|
1
|
|
2，复制文件
下面将 Documents 目录下的 hangge.png 复制到 tmp 目录下，并改名为 temp.png
这里通过
FileTransfer 对象的
copyTo() 方法进行复制，如果想要实现移动的话则改成
moveTo() 方法即可。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function
copyFile(){
function
(fileEntry) {
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
235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
