• 第四节 Electron 调用H5事件结合node模块fs 实现文件拖拽读取

    系列文章目录

    第一节 electron 介绍

    第二节 创建electron项目并启动

    第三节 Electron运行流程 、 主进程渲染进程并使用nodejs

    文章目录

    目录

    系列文章目录

    文章目录

    前言

    一、通过API了解H5的拖拽事件

    二、开干！环境准备及编写代码

    1.基于之前搭建的环境进行开发 

    2.详细代码

    总结

    前言

    本文就介绍了使用H5的拖拽加上node的fs模块在electron里实现拖拽并读取文件内容。

    一、通过API了解H5的拖拽事件

    拖动事件：
    ondrag    该事件在元素正在拖动时触发     
    ondragend    该事件在用户完成元素的拖动时触发     
    ondragenter    该事件在拖动的元素进入放置目标时触发     
    ondragleave    该事件在拖动元素离开放置目标时触发     
    ondragover    该事件在拖动元素在放置目标上时触发     
    ondragstart    该事件在用户开始拖动元素时触发     
    ondrop    该事件在拖动元素放置在目标区域时触发

    二、开干！环境准备及编写代码

    1.基于之前搭建的环境进行开发 

    在index.html renderer.js编写代码

    2.详细代码

    index.html： 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <title>title>
    6.   <meta charset="UTF-8">
    7.   <meta name="viewport" content="width=device-width, initial-scale=1">
    8.  
    9.   <script src="./renderer/renderer.js">script>
    10.   <style>
    11.     h2 {
    12.       color: red;
    13.     }
    14.  
    15.     #fileTxt {
    16.       border: 1px solid #666;
    17.       height: 400px;
    18.       width: 400px;
    19.       background-color: #f0f;
    20.     }
    21.   style>
    22. head>
    23.  
    24. <body>
    25.   <h2>Electron实例 拖拽并读取文件内容h2>
    26.   <div id="fileTxt">div>
    27. body>
    28.  
    29. html>

    renderer.js

    1. const fs= require("fs")
    2. /* 
    3. ondragenter  该事件在拖动的元素进入放置目标时触发
    4. ondragleave	该事件在拖动元素离开放置目标时触发	 
    5. ondragover	该事件在拖动元素在放置目标上时触发	 
    6. ondragstart	该事件在用户开始拖动元素时触发	 
    7. ondrop	该事件在拖动元素放置在目标区域时触发 
    8. */
    9. window.onload = ()=>{
    10.   var fileTxtDom = document.querySelector("#fileTxt")
    11.   fileTxtDom.ondragenter = fileTxtDom.ondragleave = fileTxtDom.ondragover = function(){
    12.     return false
    13.   }
    14.   fileTxtDom.ondrop=function(event){
    15.     console.log(event)
    16.     let filePath = event.dataTransfer.files[0].path
    17.     fs.readFile(filePath,(err,docs)=>{
    18.       if(err){
    19.         console.log(err)
    20.         return false
    21.       }
    22.       fileTxtDom.innerHTML = docs.toString()
    23.     })
    24.   }
    25. }

    总结

    以上就是今天要讲的内容，主要思路就是利用H5的拖拽事件获取到文件的地址在用node提供的fs模块读取其内容并赋值给DOM

  • 相关阅读:
    四万字！多线程50问！
    CPU架构
    目标跟踪实战deepsort+yolov5（上）
    Hadoop3：Yarn框架的三种调度算法
    Ubuntu18.04添加rc.local启动项
    【附源码】计算机毕业设计SSM网上求职招聘系统
    复习mysql中的事务
    跟着CTF-wiki学pwn——ret2libc1
    支付行业稳步发展，畅联助企惠民、合规前行
    Android面试每日一题(4)： 哪些情况下会导致oom问题？
  • 原文地址：https://blog.csdn.net/hongc93/article/details/126281039