您的位置：首页 > Web前端 > Node.js

nw.js node-webkit系列（20）拖动文件到页面并读取文件信息

2016-04-07 11:14 751 查看
node-webkit支持把文件直接拖动到页面，并获取文件绝对路径，再通过node.js的fn模块打开相应文件的方法。

如果想要获取拖动到页面的文件路径，请参考下面的例子：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<style>
#holder {
border: 10px dashed #ccc;
width: 300px;
height: 300px;
margin: 20px auto;
}

#holder.hover {
border: 10px dashed #333;
}
</style>
<script>
//Same as $(document).ready();
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
//When the page has loaded, run this code
ready(function() {
// prevent default behavior from changing page on dropped file
window.ondragover = function(e) {
e.preventDefault();
return false
};
// NOTE: ondrop events WILL NOT WORK if you do not "preventDefault" in the ondragover event!!
window.ondrop = function(e) {
e.preventDefault();
return false
};
var holder = document.getElementById('holder');
holder.ondragover = function() {
this.className = 'hover';
return false;
};
holder.ondragleave = function() {
this.className = '';
return false;
};
holder.ondrop = function(e) {
e.preventDefault();
for (var i = 0; i < e.dataTransfer.files.length; ++i) {
console.log(e.dataTransfer.files[i].path);
}
return false;
};
});
</script>
</head>

<body>
<div id="holder"></div>
</body>

</html>


如果需要读取更多内容，请使用：

holder.ondrop = function (e) {
e.preventDefault();

var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function (event) {
console.log(event.target);
};
console.log(file);
reader.readAsDataURL(file);

return false;
};

（注）：以上的方法是使用HTML5来绑定drag / drop事件，如果使用JQuery方法绑定时，获取dataTransfer对象要使用e.originalEvent.dataTransfer语句。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  node-webkit nw.js nwjs 轻量级桌面应用开发
相关文章推荐
新的分享
章节导航