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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。