通过HTML5 下的 FileReader 读文件

在HTML5出来之前, 浏览器里想要读取本地文件那可谓是很难很难的, 因为网页就像一个沙盒子, 读本地文件就被认为是越权的不安全的恶意行为, 当年的JAVA APPLET 还有 FLASH在这方面文件读取功能都做了限制了.

但有时候用户选择一个本地文件, 就想简单在本地做个裁剪选择或者其它一些简单的调整后才上传到服务器, 也有可能改变主意就不上传了, 如果在网页里没有这些功能的话就比较麻烦都得把文件上传到服务器上浪费了网络带宽和服务器资源. 还好HTML5提供了一些本地读取文件的标准.

首先你得先判断你的浏览器是否支持文件读取:

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 事件里大做文章了:

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?

GD Star Rating
loading...

本文一共 423 个汉字, 你数一下对不对.

通过HTML5 下的 FileReader 读文件. (AMP 移动加速版本)
上一篇: 两个熊孩子 - 这回惹妈妈生气了
下一篇: 英国脱欧后...

赞赏我的几个理由.

¥ 打赏支持

扫描二维码，分享本文到微信朋友圈

小赖子的英国生活和资讯

通过HTML5 下的 FileReader 读文件

示例

评论

示例

相关文章：

评论