node-webkit教程(10)Platform Service之File dialogs

时间 2019-11-11

标签 node webkit 教程 platform service file dialogs 繁體版

原文原文链接

node-webkit教程(10)Platform Service之File dialogs

文/玄魂html

目录html5

node-webkit教程(10)Platform Service之File dialogs. 1node

前言... 1ios

10.1 File dialogs简介... 2git

10.2 打开一个文件对话框... 4github

10.3 多文件选择对话框... 6web

10.4 文件类型过滤... 6shell

10.5 选择文件夹... 6json

10.6 保存文件对话框... 8后端

10.7 FileList8

10.8 指定默认路径... 10

10.9 小结... 11

前言

几个月前，要开发一个简易的展现应用，要求支持离线播放（桌面应用）和在线播放（web应用）。

当时第一想到的是flex，同一套代码（或者只需少许的更改）就能够同时运行在桌面和浏览器上。因为不少展示效果要全新开发，我想到了impress.js(https://github.com/bartaz/impress.js/)。若是选择impress.js，就意味着要将html5做为桌面应用，当时想到要封装webkit，可是本人对这方面也不是很熟悉，时间也颇有限，就又沿着这个方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。

node-webkit解决了我经过html和js来编写桌面应用的难题。

至于node-webkit的定义，按照做者的说法：

“ 基于node.js和chromium的应用程序实时运行环境，可运行经过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。node.js和webkit的结合体，webkit提供DOM操做，node.js提供本地化操做；且将两者的context彻底整合，可在HTML代码中直接使用node.js的API。”

从本篇文章开始，为您介绍Platform Services些列的API，本系列由如下类别：

· App – 每一个应用运行时全局api

· Clipboard – 剪贴板

· Tray – 状态栏图标，消息通知

· File dialogs-文件选择对话框

· Shell – 桌面相关

· Handling files and arguments-处理文件和相关参数

10.1 File dialogs简介

文件操做是桌面应用最常使用的功能之一，相应的打开或保存文件的文件对话框也是最经常使用的组件之一。

在html中，咱们能够经过

去打开文件对话框，上传文件到服务端。可是html中的文件对话框对于桌面应用来讲，显然是不够的，没有办法知道文件的来源，不能保存文件到本地等。

node-wekit对html的文件对话框作了扩展，本文将对这些特性作详细的说明。下面建立示例应用。

新建dialog.html 和package.json做为本文的示例程序的原型。

dialog.html内容以下：

<html>

<head>

<title>dialogDemo</title>

</head>

<body >

<h1>dialog 测试</h1>

// Load native UI library

var gui = require('nw.gui');

var win = gui.Window.get();

</script>

</body>

</html>

package.json内容以下：

{

"name": "dialog-demo",

"main": "dialog.html",

"nodejs":true,

"window": {

"title": "dialogDemo",

"toolbar": true,

"width": 800,

"height": 600,

"resizable":true,

"show_in_taskbar":true,

"frame":true,

"kiosk":false,

"icon": "2655716405282662783.png"

"webkit":{

"plugin":true

}

10.2 打开一个文件对话框

修改dialog.html以下：

<html>

<head>

<title>dialogDemo</title>

</head>

<body >

<h1>dialog 测试</h1>

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>

首先，在代码中添加了“file”类型的input标签。

这就是一个普通的文件选择框，在script中，咱们添加对改选择框的选择文件以后的事件监听代码，获取选择文件的路径。

var chooser = document.querySelector('#fileDialog');

chooser.addEventListener("change", function (evt) {

apendText(this.value);

}, false);

运行效果以下：

10.3 多文件选择对话框

若要支持文件选择框支持多文件，只须要在input标签内添加“multiple ”属性便可，这是html5支持的属性。

此时input的value值为全部文件的路径，以分号分隔。运行效果以下：

10.4 文件类型过滤

使用accept属性来过滤须要的文件类型，如：

10.5 选择文件夹

选择文件夹，而不是文件，在桌面应用中更有用，由于咱们能够经过后端程序(node.js)进行文件遍历。

使用nwdirectory属性，能够是input支持选择文件夹。

运行效果以下：

10.6 保存文件对话框

当咱们想要把某些内容保存到文档，保存文件对话框就十分重要了，固然这也是传统浏览器应用不具有的功能。

使用nwsaveas 属性能够启动保存文件对话框。

运行结果以下：

能够设置默认文件名，如：

10.7 FileList

在前面咱们经过input标签的value属性获取选择的文件，Html5提供了files 属性，能够遍历文件。

修改示例程序的script，以下：

var chooser = document.querySelector('#fileDialog');

chooser.addEventListener("change", function (evt) {

var files = this.files;

for (var i = 0; i < files.length; ++i)

apendText(files[i].name);

}, false);

function apendText(text) {

var element = document.createElement('div');

element.appendChild(document.createTextNode(text));

document.body.appendChild(element);

}

</script>

运行结果以下：

在上图中，咱们看到程序输出了选择的文件名，可是并无完整的路径。node-webkit，扩展了一个名为path的属性，经过这个属性，能够获取完整的文件路径。继续修改代码：

for (var i = 0; i < files.length; ++i)

apendText(files[i].path);

运行结果以下：

10.8 指定默认路径

不少时候，咱们须要引导用户从指定的目录打开或者保存文件，好比用户的文档目录，经过nwworkingdir属性能够完成这一需求。

修改input标签以下：

在应用中打开文件对话框，会从指定目录开始。

10.9 小结

本文内容主要参考node-webkit的官方英文文档，作了适当的调整（https://github.com/rogerwang/node-webkit/wiki/File-dialogs）。

下一篇文章，介绍shell。

鄙视不标明出处的转载，更多相关内容，欢迎访问玄魂的博客（www.xuanhun521.com）

ps：nw.js，electron交流群 313717550