2017-01-22 06:17:59 +00:00
|
|
|
|
# `File` 对象
|
2016-02-17 02:42:59 +00:00
|
|
|
|
|
2017-01-22 06:17:59 +00:00
|
|
|
|
> 在文件系统上使用 HTML5 `File` API 与本地文件交互。
|
2016-02-17 02:42:59 +00:00
|
|
|
|
|
2017-01-22 06:17:59 +00:00
|
|
|
|
为了让用户能够通过 HTML5 的 file API 直接操作本地文件,DOM 的 File 接口提供了对本地文件的抽象。Electron 在 File 接口中增加了一个 path 属性,它是文件在系统中的真实路径。
|
2016-02-17 02:42:59 +00:00
|
|
|
|
|
2017-01-22 06:17:59 +00:00
|
|
|
|
获取拖动到 APP 中文件的真实路径的例子:
|
2016-02-17 02:42:59 +00:00
|
|
|
|
|
2017-01-22 06:17:59 +00:00
|
|
|
|
```html
|
2016-02-17 02:42:59 +00:00
|
|
|
|
<div id="holder">
|
|
|
|
|
Drag your file here
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2017-01-22 06:17:59 +00:00
|
|
|
|
const holder = document.getElementById('holder')
|
|
|
|
|
holder.ondragover = () => {
|
2016-02-17 02:42:59 +00:00
|
|
|
|
return false;
|
2017-01-22 06:17:59 +00:00
|
|
|
|
}
|
|
|
|
|
holder.ondragleave = holder.ondragend = () => {
|
2016-02-17 02:42:59 +00:00
|
|
|
|
return false;
|
2017-01-22 06:17:59 +00:00
|
|
|
|
}
|
|
|
|
|
holder.ondrop = (e) => {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
for (let f of e.dataTransfer.files) {
|
|
|
|
|
console.log('File(s) you dragged here: ', f.path)
|
|
|
|
|
}
|
2016-02-17 02:42:59 +00:00
|
|
|
|
return false;
|
2017-01-22 06:17:59 +00:00
|
|
|
|
}
|
2016-02-17 02:42:59 +00:00
|
|
|
|
</script>
|
|
|
|
|
```
|