托拽文件并读取文件demo
2019-06-29 本文已影响0人
coffee1949
package.json
{
"name": "04-dragfile-readfile",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron ."
},
"keywords": [],
"author": "",
"license": "ISC"
}
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
let mainWindow = null
function createWindow(){
mainWindow = new BrowserWindow({
width: 960,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadURL(path.join("file://",__dirname,"index.html"))
mainWindow.webContents.openDevTools()
mainWindow.on('closed',()=>{
mainWindow = null
})
}
app.on('ready',()=>{
createWindow()
})
app.on('window-all-closed',()=>{
if(process.platform == 'darwin'){
app.quit()
}
})
app.on('active',()=>{
if(mainWindow === null){
createWindow()
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>electron</title>
<style>
div{
width: 100%;
height: 400px;
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div class="content"></div>
<script src="./renderer.js"></script>
</body>
</html>
renderer.js
const fs = require('fs')
let content = document.querySelector('.content')
// 这个默认事件必须阻止下
content.ondragenter = content.ondragover = content.ondragleave = function(){
return false
}
content.ondrop = function(e){
// 阻止默认事件
e.preventDefault()
// 看下事件对象是个什么鬼东西
console.log(e)
console.log(e.dataTransfer.files[0])
console.log(e.dataTransfer.files[0].path)
// 拿到拖拽的文件路径
let filePath = e.dataTransfer.files[0].path
// 使用node的fs模块读取托拽的文件 && 把文件内容填到div.content中
fs.readFile(filePath,'utf8',(err,data)=>{
if(err){
return err
}
content.innerHTML = data
})
}
