nw.js如何處理拖放操做

時間 2019-11-11

標籤 nw.js 如何處理拖放欄目 JavaScript 简体版

原文原文鏈接

nw.js如何處理拖放操做html

其實拖放（drag-drop）操做是Html5的功能，不是nw.js的內置API，那麼咱們採用Html5應用通常的處理方法就能夠了。node

首先咱們看一下一個正常的頁面，直接拖放一個文件過來的效果。chrome

頁面代碼：瀏覽器

<html>electron

<head>ide

<title>拖放測試</title>工具

</head>測試

<bodystyle="background-color:rgba(0,0,0,0);">this

<pid="output">spa

</p>

</script>

</body>

</html>

以下圖：

下面咱們拖拽一張圖片過來。

nw.js會按照chrome瀏覽器默認處理文件的方式來處理拖放的文件，能顯示的會直接顯示，不能顯示的會變成資源下載。

這確定不是桌面應用想要的效果，那麼Html5是如何處理拖放的呢？

1.1 如何禁用拖放操做

在Html元素上，咱們能夠經過ondragover和ondrop兩個事件來處理文件拖放，那麼和阻止其餘事件行爲的方法同樣，咱們只須要進行監聽並阻止冒泡就能夠了。

在頁面中添加下面的代碼：

window.ondragover=function(e) { e.preventDefault(); returnfalse };

window.ondrop=function(e) { e.preventDefault(); returnfalse };

再次測試。

而後，而後就沒有而後了。程序不會作任何反應。

1.2 如何獲取拖放的文件信息並處理

咱們的應用若是是能夠處理某種類型的文件的話，咱們是但願程序以本身的方式來處理文件的，好比演示文檔的編輯工具AxeSlide，若是直接拖放多媒體文件就會變成畫布內的編譯元素，若是是dbk文件就是打開文件進行全新的編輯。

若是是Dbk文件，就是下面的效果：

上面演示的就是針對不一樣的文件作不一樣的處理。這裏面涉及到的知識點，一個是獲取文件的信息，主要是路徑；第二是的文件的讀取、保存和進一步處理。

下面咱們修改一下上面的代碼：

<html>

<head>

<style>

#holder {

border: 10pxdashed#ccc;

width: 300px;

height: 300px;

margin: 20pxauto;

}

#holder.hover {

border: 10pxdashed#333;

}

</style>

</head>

<bodystyle="background-color:rgba(0,0,0,0);">

<pid="output">

<h5>

</h5>

</p>

<divid="holder"></div>

window.ondragover = function (e) { e.preventDefault(); returnfalse };

window.ondrop = function (e) { e.preventDefault(); returnfalse };

var holder = document.getElementById('holder');

holder.ondragover = function () { this.className = 'hover'; returnfalse; };

holder.ondragleave = function () { this.className = ''; returnfalse; };

var h5 = document.querySelector("h5");

holder.ondrop = function (e) {

e.preventDefault();

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

h5.textContent+=e.dataTransfer.files[i].path;

}

returnfalse;

};

</script>

</body>

</html>

效果以下：

咱們新建了一個div來處理文件拖放。

holder.ondrop = function (e) {

e.preventDefault();

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

h5.textContent+=e.dataTransfer.files[i].path;

}

returnfalse;

};

上面代碼經過回調中的dataTransfer.files來獲取文件信息。

接下來咱們能夠經過nodejs的文件操做來經過路徑讀取文件了，這裏就不進一步展開了。不過經過Html的FileReader對象也是能夠獲取文件數據的，例如：

holder.ondrop=function (e) {

e.preventDefault();

var file = e.dataTransfer.files[0],

reader =newFileReader();

reader.onload=function (event) {

console.log(event.target);

};

console.log(file);

reader.readAsDataURL(file);

returnfalse;

};

ok，關於文件拖放就給你們介紹到這裏，有問題能夠留言。nw.js，electron交流羣 313717550。

全部文章會在本人的博客玄魂 - 博客園和我的公衆號「xuanhun521」 http://t.cn/R4OCglP ‘’微博 http://weibo.com/xuanhun ，知乎專欄 http://zhuanlan.zhihu.com/xuanhun 進行同步，歡迎關注。

相關標籤/搜索

每日一句

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