在HTML5出来之前, 浏览器里想要读取本地文件那可谓是很难很难的, 因为网页就像一个沙盒子, 读本地文件就被认为是越权的不安全的恶意行为, 当年的JAVA APPLET 还有 FLASH在这方面文件读取功能都做了限制了.
但有时候用户选择一个本地文件, 就想简单在本地做个裁剪 选择 或者其它一些简单的调整后才上传到服务器, 也有可能改变主意就不上传了, 如果在网页里没有这些功能的话就比较麻烦 都得把文件上传到服务器上 浪费了网络带宽和服务器资源. 还好HTML5提供了一些本地读取文件的标准.
首先 你得先判断 你的浏览器是否支持 文件读取:
1 2 3 4 5 | if (window.File && window.FileReader && window.FileList && window.Blob) { // 可以读 } else { alert('需要 HTML5 的浏览器才能使用 本地文件读取'); } |
if (window.File && window.FileReader && window.FileList && window.Blob) {
// 可以读
} else {
alert('需要 HTML5 的浏览器才能使用 本地文件读取');
}然后 只能通过用户手动来选择文件而没有办法直接指定本地文件路径 因为直接曝露本地文件路径相对不安全而且有损隐私. 而当用户选定了一个文件的时候 网页代码里也只能得到一个假的不存在的路径 比如 C:\FakePath\文件
1 | <input type="file" accept="*" name="upload_file" id="upload_file" /> |
<input type="file" accept="*" name="upload_file" id="upload_file" />
当用户选择了文件 我们就可以在 OnLoad 事件里大做文章了:
1 2 3 4 5 6 7 8 | var r = new FileReader(); var file = document.getElementById('upload_file').files[0]; r.onload = function() { // 文件数据已经得到了 alert('file size = ' + r.result.length); process(r.result); } r.readAsDataURL(file); // 读成 BASE64 |
var r = new FileReader();
var file = document.getElementById('upload_file').files[0];
r.onload = function() {
// 文件数据已经得到了
alert('file size = ' + r.result.length);
process(r.result);
}
r.readAsDataURL(file); // 读成 BASE64可以通过 readAsDataURL 读取成 BASE64 格式 (适合二进制) 也可以通过 readAsText 读成文本. 这样一看 代码量很少 功能却很强大.
示例
可以访问这个页面 来转换本地任意文件成 BASE64 格式.
英文: How to Read Local Files using HTML5 FileReader?
强烈推荐
- 英国代购-畅购英伦
- TopCashBack 返现 (英国购物必备, 积少成多, 我2年来一共得了3000多英镑)
- Quidco 返现 (也是很不错的英国返现网站, 返现率高)
- 注册就送10美元, 免费使用2个月的 DigitalOcean 云主机(性价比超高, 每月只需5美元)
- 注册就送10美元, 免费使用4个月的 Vultr 云主机(性价比超高, 每月只需2.5美元)
- 注册就送10美元, 免费使用2个月的 阿里 云主机(性价比超高, 每月只需4.5美元)
- 注册就送20美元, 免费使用4个月的 Linode 云主机(性价比超高, 每月只需5美元) (折扣码: PodCastInit2022)
- PlusNet 英国光纤(超快, 超划算! 用户名 doctorlai)
- 刷了美国运通信用卡一年得到的积分 换了 485英镑
- 注册就送50英镑 – 英国最便宜最划算的电气提供商
- 能把比特币莱特币变现的银行卡! 不需要手续费就可以把虚拟货币法币兑换
微信公众号: 小赖子的英国生活和资讯 JustYYUK