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

新建render/index.js

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



/*

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


*/

var fs=require('fs');


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

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

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


content.ondrop=function(e){

    //阻止默认行为

    e.preventDefault();     

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

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


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

        if(err){

            console.log(err);

            return false;
        }
        content.innerHTML=data;
    })

}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
    
        .content{

            width: 100%;

            height: 400px;

            background: orange;


            overflow-y: auto;
        }
    </style>
  
</head>
<body>
       

    <div class="content" id="content">
   

    </div>

    <script src="renderer/index.js"></script>   

</body>
</html>

运行项目：

npm run start

 

posted on 2020-11-27 16:47  LoaderMan  阅读(390)  评论(0)  编辑  收藏  举报

导航