FileReader接口的方法
FileReader接口有4个方法,其中3个用来读取本地文件,另一个用来中断读取。无论读取成功或失败,方法并不会返回读取结果,这一结果存储在result属性中。
FileReader接口的方法
方法名 | 参数 | 描述 |
---|---|---|
readAsBinaryString | file | 将文件读取为二进制编码 |
readAsText | file,[encoding] | 将文件读取为文本 |
readAsDataURL | file | 将文件读取为DataURL |
abort | (none) | 终端读取操作 |
读取上传的文件的尺寸以及大小
demo地址
html
<input type="file" onchange="previewFile(this)">
js
function previewFile(targetInput){
console.log(targetInput.files[0].size / (1024*2)+'M=================>')
console.log(targetInput.value)
var reader = new FileReader();
reader.addEventListener("load", function () {
//加载图片获取图片真实宽度和高度
var image = new Image();
image.onload=function(event){
var width = image.width;
var height = image.height;
console.log(event)
console.log(width)
console.log(height)
};
image.src= reader.result;
}, false);
reader.readAsDataURL(targetInput.files[0]);
}
网友评论