PhoneGap中文网

 找回密码
 立即注册
查看: 18642|回复: 2

Electron 调用h5的拖放api 结合nodejs fs实现拖放打开文件功能

[复制链接]

28

主题

44

帖子

204

积分

中级会员

Rank: 3Rank: 3

积分
204
发表于 2018-9-17 21:31:47 | 显示全部楼层 |阅读模式
Electron  调用h5的拖放api 结合nodejs fs实现拖放打开文件功能



html5拖放api:http://www.runoob.com/jsref/event-ondragover.html

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件



  1. var fs=require('fs');


  2. var content=document.querySelector('#content');

  3. content.ondragenter=content.ondragover=content.ondragleave=function(){

  4.     return false; /*阻止默认行为*/
  5. }


  6. content.ondrop=function(e){

  7.     //阻止默认行为

  8.     e.preventDefault();     

  9.     console.log(e.dataTransfer.files[0]);

  10.     var path=e.dataTransfer.files[0].path;


  11.     fs.readFile(path,'utf-8',(err,data)=>{

  12.         if(err){

  13.             console.log(err);

  14.             return false;
  15.         }
  16.         content.innerHTML=data;
  17.     })

  18. }

复制代码




完整demo:

游客,如果您要查看本帖隐藏内容请回复



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-3-29 14:42 , Processed in 0.048336 second(s), 31 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表