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

最新推荐文章于 2022-08-11 17:18:15 发布

黄泽平

最新推荐文章于 2022-08-11 17:18:15 发布

阅读量2.7k

点赞数

分类专栏： node-webkit(nw.js) 前端集合 nw.js桌面应用开发文章标签： node-webkit nw.js nwjs 轻量级桌面应用开发

本文链接：https://blog.csdn.net/zeping891103/article/details/51084133

版权

前端集合同时被 3 个专栏收录

153 篇文章 10 订阅

订阅专栏

nw.js桌面应用开发

25 篇文章 28 订阅

订阅专栏

node-webkit(nw.js)

24 篇文章 3 订阅

订阅专栏

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语句。

黄泽平

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
nw.js node-webkit系列（20）拖动文件到页面并读取文件信息

node-webkit支持把文件直接拖动到页面，并获取文件绝对路径，再通过node.js的fn模块打开相应文件的方法。如果想要获取拖动到页面的文件路径，请参考下面的例子： #holder { border: 10px dashed #ccc; width: 300px; height: 300px; margin: 20px
复制链接

扫一扫