正文

electron中实现拖拽文件进div中通过file对象获取文件的路径和内容(代码片段)

badaoliumangqizhi  badaoliumangqizhi  2022-12-14  211

关键词：

场景

用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好项目以及知道怎样进行调试后，需要实现将文件拖拽进div后获取文件的路径和内容。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

首先打开index.html，添加一个div

<div class="for_file_drag" id="drag_test">
  <h2>File对象</h2>
  <span>往这里拖文件</span>
</div>

并给这个div添加一个id和样式，新建css文件夹并在文件夹下新建style.css

.for_file_drag 
    width: 100%;
    height: 400px;
    background: pink;

给div添加一个宽度高度和背景色

然后在index.html中引用的js中

// File对象 实例
const fs = require(‘fs‘);
//获取div对象
const dragWrapper = document.getElementById("drag_test");
//添加拖拽事件监听器
dragWrapper.addEventListener("drop", (e) => 
    //阻止默认行为
    e.preventDefault();
    //获取文件列表
    const files = e.dataTransfer.files;

    if(files && files.length > 0) 
        //获取文件路径
        const path = files[0].path;
        console.log(‘path:‘, path);
        //读取文件内容
        const content = fs.readFileSync(path);
        console.log(content.toString());
    
)

//阻止拖拽结束事件默认行为
dragWrapper.addEventListener("dragover", (e) => 
    e.preventDefault();
)

然后调试运行项目，然后往div中拖拽一个文件，然后打开控制台

技术图片

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for& 查看详情

如何在vue中实现拖拽(代码片段)

1、npmi vuedraggable2、在组件中引入importvuedraggablefrom'vuedraggable';3、<template><vuedraggableclass="wrapper"v-model="list"><transition-group><divv-for="iteminlist":key="item"class="item"><p&... 查看详情

如何在vue中实现拖拽(代码片段)

Java 7：如何在 Java 中实现拖放？

】Java7：如何在Java中实现拖放？【英文标题】：Java7:Howtoimplementdrag&dropinJava?【发布时间】：2013-04-2515:06:25【问题描述】：我目前正在使用Java7Update21进行拖放试验。我的目标操作系统是：Windows7Ubuntu12.04MacOSX10.6/10.8要求是：将文... 查看详情

有没有办法在 phonegap angular js 项目中实现拖放？

】有没有办法在phonegapangularjs项目中实现拖放？【英文标题】：Isthereawaytoimplementdrag&dropinaphonegapangularjsproject?【发布时间】：2014-12-0116:27:04【问题描述】：我试过这个：https://github.com/codef0rmer/angular-dragdrop和touchpunch(http://touchpunc... 查看详情

vue3中实现拖拽和缩放自定义看板vue-grid-layout(代码片段)

VueGridLayout官方文档VueGridLayout中文文档1.npm下载拖拽缩放库npminstallvue-grid-layout@3.0.0-beta1--save2. vue3使用vue-grid-layout报错：external_commonjs_vue_commonjs2_vue_root_Vue_default.aisnotaconstructor 解决方案: vue3版本记得下载对应vue-grid-layout... 查看详情

jQuery 拖拽和绘制

...知道在哪里可以找到如何做到这一点的例子。如何在jQuery中实现拖拽？【问题讨论】：【参考方案1】：这样的事情的基础很简单，仔细想想：监听某个容器上的mouse 查看详情

在 NSTableView 中实现拖放

】在NSTableView中实现拖放【英文标题】：ImplementingdraganddropinNSTableView【发布时间】：2011-08-2206:29:32【问题描述】：谁能帮我？我在下面使用了这段代码，但这些方法在执行期间没有被调用。-(BOOL)tableView:(NSTableView*)tvwriteRowsWithIndexe... 查看详情

electron中通过ipcmain和ipcrender实现主进程和渲染进程之间的相互通信(代码片段)

场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/ 查看详情

在 Gingerbread 中实现拖放

】在Gingerbread中实现拖放【英文标题】：ImplementDrag&DropinGingerbread【发布时间】：2012-02-0620:19:10【问题描述】：我需要知道如何在Android中为Gingerbread版本实现拖放。据我所知，Gingerbread默认不支持。我编码的内容：一个ViewGroup类... 查看详情

如何在 cypress 测试中实现拖放？

】如何在cypress测试中实现拖放？【英文标题】：Howtoimplementdraganddropincypresstest?【发布时间】：2019-08-1702:14:13【问题描述】：我正在努力使用Cypress和AngularMaterialDragandDrop测试拖放。因此，目标是将“开始工作”从待办事项转移到... 查看详情

electron开发：electron应用中的拖拽操作

...行为称为拖拽操作。本节将会通过两个案例介绍如何实现Electron应用的拖拽操作。本节将通过一个简单的案例演示如何实现图像文件的拖放操作，本例的主要功能是将一个图像文件拖拽的程序的某个区域，然后在窗口上按等比例... 查看详情

如何在unity中实现拖尾效果

在制作游戏过程中会出现鼠标滑动的实现，而为啦增强视觉效果，往往会添加拖尾或者鼠标点击的特效，接下来就说说在unity中如何实现拖尾效果，首先unity中有个组件，叫TrailRenderer,在Component——>Effect——>TrailR... 查看详情

如何在 vue.js 中通过 NeDB 的“返回”获取结果

...布时间】：2019-10-2117:13:44【问题描述】：我正在尝试使用electron-vue以.vue文件中的方法从NeDB获取数据。我知道我可以通过将它放入一个变量来得到它，但我想通过\'return\'得到它，因为我想在v-for中使用结果。我尝试使用bluebirdpro 查看详情

electron中实现大文件上传和断点续传功能(代码片段)

Electron官网的描述：Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。从官... 查看详情

spring中通过变量和import标签来控制加载哪些bean

　　需求：根据设置变量，来加载某个spring的bean的配置文件，这个配置文件中，有某些使用的bean。在一些情况下，不希望这些bean被初始化和加载进context中，也不需要被外面访问到。　　在spring中，我们通过placeholder类可以读取... 查看详情

在 Angularjs 中通过 WebSocket STOMP

...gularjs+cordova创建一个移动应用程序。如何在我的应用程序中实现STOMPOverWebSocket。当我这样查看详情

html5拖拽——将本地文件拖拽到网页中显示

...取内容FileWrite用于向文件中写入类容这些对象需要在H5的拖拽事件中通过e.dataTransfer来访问和获取完成效果如下：DataURL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引查看详情