本地应用一个很重要的因素就是使用本地文件对话框能力。HTML5对文件对话框提供了有限的支持,你可以使用<input
让用户上传文件。但是对node-webkit是远远不够的,我们扩展了input。
type='file' />
(一)如何打开文件对话框
为了创建文件对话框,我们首先需要创建一个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>