H5 File 文件操作

优质
小牛编辑
139浏览
2023-12-01

使用H5的 File API操作本地文件

Electron增添了 path属性的 File接口,用来获得文件真实路径。
拖入文件到app并显示真实路径的例子:
1
<div id=`holder`>
2
拖拽文件到这里
3
</div>
4

5
<script>
6
const holder = document.getElementById('holder')
7
holder.ondragover = () => {
8
return false;
9
}
10
holder.ondragleave = holder.ondragend = () => {
11
return false;
12
}
13
holder.ondrop = (e) => {
14
e.preventDefault()
15
for (let f of e.dataTransfer.files) {
16
console.log('File(s) you dragged here: ', f.path)
17
}
18
return false;
19
}
20
</script>
Copied!