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

tengfeng

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

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

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

1. 
   
2. 
   
3. var fs=require('fs');
   
4. 
   
5. 
   
6. var content=document.querySelector('#content');
   
7. 
   
8. content.ondragenter=content.ondragover=content.ondragleave=function(){
   
9. 
   
10.     return false; /*阻止默认行为*/
    
11. }
    
12. 
    
13. 
    
14. content.ondrop=function(e){
    
15. 
    
16.     //阻止默认行为
    
17. 
    
18.     e.preventDefault();     
    
19. 
    
20.     console.log(e.dataTransfer.files[0]);
    
21. 
    
22.     var path=e.dataTransfer.files[0].path;
    
23. 
    
24. 
    
25.     fs.readFile(path,'utf-8',(err,data)=>{
    
26. 
    
27.         if(err){
    
28. 
    
29.             console.log(err);
    
30. 
    
31.             return false;
    
32.         }
    
33.         content.innerHTML=data;
    
34.     })
    
35. 
    
36. }
    
37. 
    

复制代码

完整demo:

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