如何通过JavaScript获取File对象？本地文件路径能否实现？

问题描述 #

我之前通过以下代码从文件选择器获取了正确的File对象（已用console.log验证）：

var file = event.target.files[0];

该对象的信息如下：

File lastModified: 1526981976000 ​ lastModifiedDate: Date 2018-05-22T09:39:36.000Z Name:"path.png" size: 19776 type: "image/png" webkitRelativePath: ""...

现在我想直接通过本地文件系统的图片路径（比如C:/images/path.png）来获取这类File对象，请问这是否可行？

回答 #

咱直接说结论：普通网页环境下，没办法直接通过本地文件路径获取原生File对象，但有几种替代思路可以满足你的需求，下面给你拆解清楚：

为什么不行？ #

这是浏览器的安全机制在起作用——为了防止恶意脚本偷偷读取用户本地的隐私文件，浏览器严格限制了JS对本地文件系统的直接访问权限。你没法仅凭一个本地路径字符串（比如C:/xxx.png）就拿到对应的File对象，必须经过用户主动的交互操作才行。

可行的替代方案 #

1. 最标准的方式：依赖用户主动选择文件
   就是你之前用的<input type="file">方案，用户手动选择文件后，浏览器才会允许你获取对应的File对象，这也是网页环境下唯一能拿到原生File对象的合法途径。

2. 手动构造模拟的File对象
   如果你已经有了文件的二进制内容（比如通过后端接口下载到的Blob、或者自己生成的图片数据），可以手动构造一个和原生File对象结构、行为几乎一致的对象：

   // 假设fileContent是你已有的文件二进制数据
   const blob = new Blob([fileContent], { type: 'image/png' });
   const simulatedFile = new File([blob], 'path.png', {
     lastModified: 1526981976000,
     type: 'image/png'
   });
   

   这个模拟对象能满足绝大多数需要File对象的API场景（比如上传、预览等），但它并不是真正从本地文件系统读取的原生对象。

3. 桌面应用场景：用Electron等框架突破限制
   如果你是在Electron这类桌面端开发框架里做应用，那可以借助Node.js的fs模块读取本地文件，再转换成File对象：

   const fs = require('fs');
   const localFilePath = 'C:/images/path.png';
   
   fs.readFile(localFilePath, (err, fileBuffer) => {
     if (err) throw err;
     const fileBlob = new Blob([fileBuffer], { type: 'image/png' });
     const targetFile = new File([fileBlob], 'path.png', {
       lastModified: fs.statSync(localFilePath).mtime.getTime(),
       type: 'image/png'
     });
     // 这里的targetFile就是你需要的对象了
   });
   

   但注意，这种方式只适用于桌面应用，普通网页里完全行不通。

总结一下：普通网页里别想直接通过本地路径拿File对象，要么靠用户选文件，要么自己构造模拟对象；桌面应用的话才有办法直接读取本地文件转换。

内容的提问来源于stack exchange，提问作者Daniel