在HTML5中,我们可以使用FileReader对象来读取INPUT-INPUT控件中选中的文件的内容。下面是例子:
<input type="file" id="f" />
<script>
window.onload=function(){
//获取INPUT-FILE控件对象
var f=document.getElementById("f");
//添加change事件,会在选择文件时候触发
f.onchange=function(){
//创建一个FR对象来读文件
var fr=new FileReader;
//给FR对象添加一个load事件,会在读到文件时候触发
fr.onload=function(){
//这个result属性中保存的就是文件的内容啦
console.log(fr.result);
};
//读取二进制数据到一个字符串中,或者称为字节数组
fr.readAsBinaryString(f.files[0]);
};
};
</script>
注意HTML5中的INPUT-FILE控件中使用的是储存文件列表的files属性,因为在HTML5中INPUT-FILE控件有个multiple属性,这是上这个属性就可以同时选择多个文件了,所以需要用拟数组来保存选中的文件列表。这个例子中没有设置multiple,这就意味着只能选择一个文件。那么我们在文件选中以后从files属性的0这个索引中取出这个文件对象。
关于文件对象,在早期的HTML5中支持getAs*的方法,可以直接读取文件的内容,但是现在的HTML5中废弃了这些方法。需要使用专门的FileReader对象来读取文件内容。FileReader可以以不同的方式读入文件,比如上面的例子是把文件的二进制作为字符串读入,也就是ANSI编码读入。
除了笨拙的INPUT-FILE控件外,还有另外一种灵活的文件选择方式。那就是传说中的拖拽,使用拖拽事件可以直接获取到拖拽到网页上的文件。下面是拖拽的例子:
<script>
//这个是火狐的BUG,不阻止dragover的行为就无法组织drop的行为
document.ondragover=function(e){e.preventDefault()};
//直接在整个文档上定义拖拽事件
document.ondrop=function(e){
//创建FR对象,这个在上面的例子中介绍过了
var fr=new FileReader;
fr.onload=function(){
console.log(fr.result);
};
//使用FR对象以utf-8的编码读取一个文本文件
fr.readAsText(e.dataTransfer.files[0],"utf-8");
//阻止默认行为
//文件拖拽会被有些浏览器解析为“打开”
e.preventDefault();
};
</script>
读文件就是这么简单啦,学会了读文件我们就可以利用它做很多事情。比如在客户端计算文件的MD5,这样就可以在文件上传之前和服务器的文件列表比对,以防止重复上传浪费带宽。功能的实现就是这样,具体的用途那就是项目设计师的工作了。
名称栏目:JavaScript读HTML5文件
网站URL:https://www.cdcxhl.com/news25/321625.html
成都网站建设公司_创新互联,为您提供网站内链、商城网站、ChatGPT、用户体验、外贸网站建设、标签优化
广告
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联