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

柔光的暖阳◎ 2021-09-10 22:44 219阅读 0赞

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