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

来源：互联网发布：欧美手机主题软件编辑：程序博客网时间：2024/06/06 03:15

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 codeready(function() {// prevent default behavior from changing page on dropped filewindow.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语句。

0 0