[置顶] nw.js node-webkit系列(12)Native UI API File dialogs的使用

时间:2021-06-20 05:44:51

本地应用一个很重要的因素就是使用本地文件对话框能力。HTML5对文件对话框提供了有限的支持,你可以使用<input
type='file' />
 让用户上传文件。但是对node-webkit是远远不够的,我们扩展了input。

(一)如何打开文件对话框

为了创建文件对话框,我们首先需要创建一个input标签并隐藏它。下面例子为了测试方便,把input标签显示出来:

<!DOCTYPE html>
<html>
<span style="white-space:pre"></span><head>
<title>dialogDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
<h1>dialog 测试</h1>
<input id="fileDialog" type="file"/>
<script>
var chooser = document.querySelector('#fileDialog');
chooser.addEventListener("change", function(evt) {
apendText(this.value);
}, false);
function apendText(text) {
var element = document.createElement('div');
element.appendChild(document.createTextNode(text));
document.body.appendChild(element);
}
</script>
</body>
</html>

或者使用JQuery语法:

var chooser = $('#fileDialog');
chooser.unbind('change');
chooser.change(function(evt) {
apendText($(this).val());
});

或者使用添加事件的方法:

var chooser = $('#fileDialog');
chooser.addEvent("change", function() {
apendText(this.value);
});

(二)其他文件对话框参考

Multiple

多文件选择对话框,只需要在在input标签中添加multiple 属性即可。

<input type="file" multiple />

其中使用

$('#fileDialog').val()
获取文件的地址,文件地址之间使用';'隔开。


Filter File
文件类型过滤,只要使用accept属性即可,例子如下:

<input id="fileDialog" type="file" multiple accept=".doc,.docx,.xml,application/msword">

Select directory

打开保存目录对话框。为了保证能完成“写”操作的文件对话框,node-webkit提供了两个属性:nwdirectory 和 nwsaveas.开发者可以通过添加属性nwdirectory 来选择保存目录,结果返回保存目录的地址。

<input type="file" nwdirectory />


Save file

打开保存文件对话框。nwsaveas 会让用户打开一个“另存为”的保存文件对话框,结果返回保存的文件地址。

<input type="file" nwsaveas />
也可以默认文件名称:

<input type="file" nwsaveas="filename.txt" />
注:该方法仅可获取需要保存的文件地址,并不能生成文件。如要“写:入生成文件,请使用一下语句;

<span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<title>dialogDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.8.0.js" ></script>
</head>
<body>
<h1>dialog 测试</h1>
<button id="fileDialog" />
<script>
var fs = require("fs");
$("#fileDialog").click(function() {
var input = $("#fileDialog");
var dirr = "C:\\Users\\netinnet\\Desktop\\1.txt";
fs.writeFile(dirr, "content", function(err) {
alert("File Saved!!");
});
});
</script>
</body>
</html></span>


FileList

在前面我们通过input标签的value属性获取选择的文件,Html5提供了files 属性,可以遍历文件。

var files = $('#fileDialog')[0].files;
for (var i = 0; i < files.length; ++i)
console.log(files[i].name);

但这样只能获取文件的名称,并不能获取文件的地址。因此node-webkit作出了扩展

for (var i = 0; i < files.length; ++i)
console.log(files[i].path);

Default path

很多时候,我们需要引导用户从指定的目录打开或者保存文件,比如用户的文档目录,通过nwworkingdir属性可以完成这一需求。

Windows写法:

<input type="file" nwworkingdir="C:\Windows" />

Unix写法:

<input type="file" nwworkingdir="/home/path/" />


注意,当多次打开对话框选择同一个目录时,可能会发生这种情况,change事件并没有触发,因为对input来说并没有发生改变。这时就要重新设置输入值确保change事件可以发生。例子如下:

<script>
function chooseFile(name) {
var chooser = $(name);
chooser.change(function(evt) {
console.log($(this).val());
// Reset the selected value to empty ('')
$(this).val('');
});

chooser.trigger('click');
}
chooseFile('#fileDialog');
</script>