从公共网站将本地文件加载到javascript变量中

与类似的问题不同，类似的问题涉及从本地打开的.html文件在浏览器中运行的javascript，我正在寻找一个从公共网站访问时可以工作的解决方案，在2020年9月，许多浏览器似乎已经加强了安全性，并且接受的答案不再有效

我的用例是，我希望用户通过输入表单选择一个文件，然后向他们展示修改文件内容的选项，然后再将其上传到服务器（此时可能使用ajax）

我意识到一个解决方法是像平常一样将文件上传到服务器上，在服务器上读取文件，将内容用ajax返回给用户，让他们修改，然后用ajax返回服务器。如果可能的话，我希望第一次保存一次往返，并将文件内容直接读取到javascript变量中

从一个类似的问题中，我发现：

<input type="file" onchange="this.files[0].text().then(t => console.log(t))" />

如果我从我的计算机上打开.html网站（即

文件：//

），这是可行的，但是如果我从公共域（

https://

）打开它，则不可行

---

在最新（2020年9月）的Chrome/Firefox中，还有其他方法可以做到这一点吗？

这实际上是可能的

我已经放弃了。我确信我必须将文件上传到服务器，然后通过ajax将其发送回客户端，然后使用 用户，然后将其发送回服务器

纯Javascript

不是这样。我找到了这个链接： 其中描述了以下方法：

读取图像文件
读取图像文件

{
output.src=event.target.result；
});
reader.readAsDataURL（文件）；
}); 
}

上面的代码允许用户从HD中选择一个图像，然后使用FileReader API将数据加载到javascript中，而无需将其发送到服务器。我在别处读到过FileReader在网络上不是这样工作的，但我错了

如果要读取其他类型的文件，请确保在文件读取器上调用不同的方法，例如为文本调用

readAsText

，甚至作为数组缓冲区

readAsArrayBuffer

这个链接有更多的细节

在Windows 10上测试2020-10-02

• Firefox 81.0 64位
• Chrome 85.0.4183.121（官方版本）（64位）
• Edge 85.0.564.68（正式构建）（64位）

反应

最简单的方法是使用

react dropzone

库 以下内容摘自麻省理工学院官方文件：

import React，{useCallback}来自“React”
从“react dropzone”导入{useDropzone}
函数MyDropzone（）{
const onDrop=useCallback（（acceptedFiles）=>{
acceptedFiles.forEach（（文件）=>{
const reader=new FileReader（）
reader.onabort=（）=>console.log（'文件读取被中止'）
reader.onerror=（）=>console.log（'文件读取失败'）
reader.onload=（）=>{
//对文件内容执行任何操作
const binaryStr=reader.result
console.log（二进制str）
}
reader.readAsArrayBuffer（文件）
})
}, [])
const{getRootProps，getInputProps}=useDropzone（{onDrop}）
返回(
将一些文件拖放到此处，或单击以选择文件

)
}

我认为你做不到。如果检查输入项的值，您将看到类似于

c:\fakepath\filename.ext的内容，因此您无论如何都无法在任何应用程序中打开该文件。