tengfeng 发表于 2018-9-17 21:31:47

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

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



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);

    var path=e.dataTransfer.files.path;


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

      if(err){

            console.log(err);

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

}





完整demo:
**** Hidden Message *****


页: [1]
查看完整版本: Electron 调用h5的拖放api 结合nodejs fs实现拖放打开文件功能