electron拖拽文件需要用到html5的dragover和drop事件
例子如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>electron拖拽文件</title>
</head>
<body>
<div id="area" style="background-color: red;width: 300px;height: 300px;">
</div>
<label>请将图像文件拖动到红色区域</label>
<img id="image" style="width: auto;height: auto;max-width: 300px;max-height: 300px;">
<script>
//拖动事件
area.ondragover = (e)=>{
e.preventDefault();
}
//放下事件
area.ondrop = (e)=>{
e.preventDefault();
let files = e.dataTransfer.files;//获取到拖拽进来的所有图片
image.src = files[0].path;//将第一张图片插入到页面
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>electron拖拽文件</title>
</head>
<body>
<div id="area" style="background-color: red;width: 300px;height: 300px;">
</div>
<label>请将图像文件拖动到红色区域</label>
<img id="image" style="width: auto;height: auto;max-width: 300px;max-height: 300px;">
<script>
//拖动事件
area.ondragover = (e)=>{
e.preventDefault();
}
//放下事件
area.ondrop = (e)=>{
e.preventDefault();
let files = e.dataTransfer.files;//获取到拖拽进来的所有图片
image.src = files[0].path;//将第一张图片插入到页面
}
</script>
</body>
</html>
