文/玄魂
目錄
node-webkit教程(10)Platform Service之File dialogs
前言
10.1 File dialogs簡介
10.2 打開一個文件對話框
10.3 多文件選擇對話框
10.4 文件類型過濾
10.5 選擇文件夾
10.6 保存文件對話框
10.7 FileList
10.8 指定默認路徑
10.9 小結
幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（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-處理文件和相關參數
文件操作是桌面應用最常使用的功能之一，相應的打開或保存文件的文件對話框也是最常用的組件之一。
在html中，我們可以通過
<input type='file' />
去打開文件對話框，上傳文件到服務端。但是html中的文件對話框對於桌面應用來說，顯然是不夠的，沒有辦法知道文件的來源，不能保存文件到本地等。
node-wekit對html的文件對話框做了擴展，本文將對這些特性做詳細的說明。下面創建示例應用。
新建dialog.html 和package.json作為本文的示例程序的原型。
dialog.html內容如下：
<html>
<head>
<title>dialogDemo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body >
<h1>dialog 測試</h1>
<script>
// 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
}
}
修改dialog.html如下：
<html>
<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>
首先，在代碼中添加了“file”類型的input標簽。
<input id="fileDialog" type="file" />
這就是一個普通的文件選擇框，在script中，我們添加對改選擇框的選擇文件之后的事件監聽代碼，獲取選擇文件的路徑。
var chooser = document.querySelector('#fileDialog');
chooser.addEventListener("change", function (evt) {
apendText(this.value);
}, false);
運行效果如下：
若要支持文件選擇框支持多文件，只需要在input標簽內添加“multiple ”屬性即可，這是html5支持的屬性。
<input id="fileDialog" type="file" multiple />
此時input的value值為所有文件的路徑，以分號分隔。運行效果如下：
使用accept屬性來過濾需要的文件類型，如：
<input id="fileDialog" type="file" multiple accept=".html"/>
選擇文件夾，而不是文件，在桌面應用中更有用，因為我們可以通過后端程序(node.js)進行文件遍歷。
使用nwdirectory屬性，可以是input支持選擇文件夾。
<input id="fileDialog" type="file" nwdirectory />
運行效果如下：
當我們想要把某些內容保存到文檔，保存文件對話框就十分重要了，當然這也是傳統瀏覽器應用不具備的功能。
使用nwsaveas 屬性可以啟動保存文件對話框。
<input id="fileDialog" type="file" nwsaveas />
運行結果如下：
可以設置默認文件名，如：
<input id="fileDialog" type="file" nwsaveas="aa.txt"/>
在前面我們通過input標簽的value屬性獲取選擇的文件，Html5提供了files 屬性，可以遍歷文件。
修改示例程序的script，如下：
<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);
運行結果如下：
很多時候，我們需要引導用戶從指定的目錄打開或者保存文件，比如用戶的文檔目錄，通過nwworkingdir屬性可以完成這一需求。
修改input標簽如下：
<input id="fileDialog" type="file" nwworkingdir="D:\xuanhunfile" />
在應用中打開文件對話框，會從指定目錄開始。
本文內容主要參考node-webkit的官方英文文檔，做了適當的調整（https://github.com/rogerwang/node-webkit/wiki/File-dialogs）。
下一篇文章，介紹shell。
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客（www.xuanhun521.com）
更多相關內容，歡迎訪問玄魂的博客(更多node-webkit相關內容 http://www.xuanhun521.com/Blog/Tag/node-webkit)
ps：nw.js，electron交流群 313717550