nw.js node-webkit系列（12）Native UI API File dialogs的使用

最新推荐文章于 2024-09-03 08:17:21 发布

黄泽平

最新推荐文章于 2024-09-03 08:17:21 发布

阅读量4.8k

点赞数 2

分类专栏： node-webkit(nw.js) 前端集合 nw.js桌面应用开发

本文链接：https://blog.csdn.net/zeping891103/article/details/50765837

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

nw.js桌面应用开发

25 篇文章 28 订阅

订阅专栏

node-webkit(nw.js)

24 篇文章 3 订阅

订阅专栏

本地应用一个很重要的因素就是使用本地文件对话框能力。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>