HTML5在APP中无法直接读取本地文件，需依赖容器能力：原生WebView需配置权限并限制路径，Capacitor/Cordova须经插件桥接，Electron因Node.js支持可行但属桌面端。
HTML5在APP里直接读本地文件行不行
不行，但有绕过路径——关键看APP用什么容器封装HTML5页面。WebView本身不给网页直接访问file://路径的权限，尤其Android 7+和iOS WKWebView默认禁掉readAsText对本地文件的调用，连input[type="file"]选中后调FileReader.readAsText()都可能返回空或报SecurityError。
常见错误现象：Failed to execute 'readAsText' on 'FileReader': Failed to read the file；或者FileList里有文件，但file.path是undefined或""。
- 纯WebView（如Android原生
WebView）：需手动开启setAllowContentAccess(true)和setAllowFileAccess(true)，且仅对file:///android_asset/或/sdcard/下白名单路径有效 - Capacitor/Cordova：必须走插件桥接，比如用
@capacitor/filesystem读ApplicationDirectory里的文件，不能直接fetch("file:///...") - Electron打包的“APP”：可以，因为Node.js上下文允许
fs.readFileSync()，但这是桌面端，不算真正意义的HTML5转移动APP
Android WebView怎么开文件读取权限
不是加个配置就完事，得配对、分版本、还要防崩溃。Android 9（API 28）开始，默认禁止file://跨域加载，哪怕同域也会被拦截。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
AndroidManifest.xml里给Activity加android:usesCleartextTraffic="true"（仅调试期，上线要关） -
WebView.getSettings().setAllowFileAccess(true)必须在loadUrl()前调用 - 如果加载的是
file:///android_asset/index.html，想读同目录下的data.json，得用fetch("data.json")，而不是fetch("file:///android_asset/data.json")——后者会触发CORS - 真要读SD卡文件，得用
Environment.getExternalStorageDirectory()+FileInputStream写Java层接口，再通过addJavascriptInterface()暴露给JS，注意加@JavascriptInterface注解且只在API setJavaScriptEnabled(true)
iOS WKWebView根本读不了本地文件路径
WKWebView从设计上就切断了JS访问file://的能力，input[type="file"]选中的文件，JS只能拿到File对象的元信息（name、size、type），file.webkitRelativePath为空，file.path不可读——这不是bug，是苹果强制的安全策略。
能走的路只有一条：让原生层把文件内容读出来，再传给JS。
- 用
WKScriptMessageHandler接收JS请求，例如调webkit.messageHandlers.readFile.postMessage({path: "doc.txt"}) - 原生用
NSString *content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil]读，再evaluateJavaScript:completionHandler:回传 - 别碰
UIWebView，iOS 12起已废弃，App Store拒收 - Capacitor项目直接用
Filesystem.readFile()，它底层就是走NSFileManager，路径填FilesystemDirectory.Data就行，不用拼绝对路径
为什么fetch("file:///...")在APP里大概率失败
因为现代WebView把file://协议当成“不同源”，直接拒绝跨协议请求，即使URL看起来是本地路径。Chrome浏览器里能跑通的代码，在APP里90%会卡在CORS或net::ERR_ACCESS_DENIED。
典型错误场景：
- 开发时用
live-server跑http://localhost:3000，fetch("data.json")正常；打包进APP后改成file:///android_asset/index.html，同一行代码就报错 - 误以为
cordova-plugin-file能让fetch("file:///storage/emulated/0/test.txt")生效——其实它只提供window.resolveLocalFileSystemURL()这类专用API，不劫持全局fetch - 在iOS上尝试用
XMLHttpRequest同步读file://路径，结果线程卡死，因为WKWebView根本不响应
最稳的做法：别让JS自己伸手去够文件系统。把读文件变成“发消息→原生干活→回传数据”的三步动作，路径由原生控制，JS只管业务逻辑。这个边界划不清，后面所有文件操作都会反复踩坑。
