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

系列文章目录

第一节 electron 介绍

第二节创建electron项目并启动

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

文章目录

前言

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

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

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

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

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

在index.html renderer.js编写代码

2.详细代码

index.html：


html>
<html lang="en">
 
<head>
  <title>title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
 
  <script src="./renderer/renderer.js">script>
  <style>
    h2 {
      color: red;
    }
 
    #fileTxt {
      border: 1px solid #666;
      height: 400px;
      width: 400px;
      background-color: #f0f;
    }
  style>
head>
 
<body>
  <h2>Electron实例 拖拽并读取文件内容h2>
  <div id="fileTxt">div>
body>
 
html>

renderer.js


const fs= require("fs")
/* 
ondragenter  该事件在拖动的元素进入放置目标时触发
ondragleave	该事件在拖动元素离开放置目标时触发	 
ondragover	该事件在拖动元素在放置目标上时触发	 
ondragstart	该事件在用户开始拖动元素时触发	 
ondrop	该事件在拖动元素放置在目标区域时触发 
*/
window.onload = ()=>{
  var fileTxtDom = document.querySelector("#fileTxt")
  fileTxtDom.ondragenter = fileTxtDom.ondragleave = fileTxtDom.ondragover = function(){
    return false
  }
  fileTxtDom.ondrop=function(event){
    console.log(event)
    let filePath = event.dataTransfer.files[0].path
    fs.readFile(filePath,(err,docs)=>{
      if(err){
        console.log(err)
        return false
      }
      fileTxtDom.innerHTML = docs.toString()
    })
  }
}

总结

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

相关阅读:
uniapp地图点击获取位置
计算机算法分析与设计（4）---矩阵连乘问题(含C++代码)
JSON和实体类,LIst互相转换
Windows 10 docker-compose 自动化构建【lnmp】
JVM 垃圾回收算法
分类预测 | MATLAB实现WOA-CNN-BiLSTM-Attention数据分类预测
【接口自动化测试】HTTP协议详解
nginx
多测师肖sir_高级金牌讲师_jenkins搭建
一文澄清网上对 ConcurrentHashMap 的一个流传甚广的误解!

原文地址：https://blog.csdn.net/hongc93/article/details/126281039