javascript - Electronjs 拖放
问题描述
我是电子新手,想处理拖放功能。想要删除文件并获取其扩展名。根据扩展名更改屏幕上的某些内容。
即,如果将 .mp3 文件放入其中,则要将 backgroundColor 更改为绿色,并将 .jpg 文件更改为红色。
我已经设法使用拖放,但不知道如何正确处理它。到目前为止我的代码是:
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body style="color: grey;">
<div class="character">
<h1>{nome}</h1>
<img id="char_anim" src="assets/goku.gif" />
</div>
</body>
<a href="#" id="drag">item</a>
<script type="text/javascript" charset="utf-8">
document.getElementById("drag").ondragstart = (event) => {
event.preventDefault();
ipcRenderer.send("ondragstart", "/path/to/item");
};
</script>
</html>
main.js
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");
const MAIN_HTML = path.join("file://", __dirname, "main.html");
const CHILD_PADDING = 50;
const onAppReady = function () {
let parent = new BrowserWindow({
width: 800,
height: 1200,
transparent: false,
frame: true,
});
parent.once("close", () => {
parent = null;
});
parent.loadURL(MAIN_HTML);
};
//~ app.on('ready', onAppReady);
app.on("ready", () => setTimeout(onAppReady, 500));
// dragndrop
ipcMain.on("ondragstart", (event, filePath) => {
event.sender.startDrag({
file: filePath,
icon: "/path/to/icon.png",
});
});
我可以解释更多,但我只需要一种方法来处理应用程序,以了解哪个扩展程序有这个删除的文件并为一个或另一个显示不同的消息。
解决方案
path
在您的主进程中,您可以使用模块获取文件扩展名:
let ext = require('path').extname(filePath)
然后,您可以将返回值发送到渲染器,如下所示:
event.sender.send('get-file-extension', ext);
之后,您可以使用 ipcRenderer 获取发送的值以更改背景颜色:
ipcRenderer.on('get-file-extension', (event, extension) => {
if(extension == '.mp3')
document.body.style.backgroundColor = "green";
else if(extension == '.jpg')
document.body.style.backgroundColor = "red";
});
推荐阅读
- python - 同时听和识别 - Python 语音识别
- python - 如何从 variable.stdout 写入文件 EXACT 输出
- python - Python Selenium:如果空闲则退出浏览器
- parsing - Amazon SES 消息 ID 中的这个十六进制时间戳的格式是什么?
- node.js - 我得到 net.createconnection 不是使用 Browserify 的函数
- docker - 码头工人:'-ti'参数
- git - 如何在 git 上修改提交的文件?
- mysql - 更新 MySQL 数据库中存储的 JSON
- macos - 在 MacOS 上单击虚拟机
- angular - Angular 9 - 用于子布局组件和页面内容的路由器插座