对书上案例进行改进和注释。特别注意文件大小单位的转换。下图中前两行是循环中进行的打印,可忽略。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
window.onload = function () {
var oFile = document.getElementById("file");
oFile.onchange = function(){
//获取第1个文件
var file = oFile.files[0];
//默认单位是B,在此对超过1024B的图片大小进行转换
var unitArr = ["B", "KB", "MB", "GB", "TB"];
var size = file.size;
//转化单位,每循环一次,就上升一个单位
for (var i = 0; size > 1; i ++) {
//size.toFixed(2)方法是四舍五入保留2位小数,不会改变size的值
var fileSizeString = size.toFixed(2) + unitArr[i];
// console.log(size + " " + fileSizeString);
size /= 1024;
}
//输出结果
console.log("图片名称为:" + file.name);
console.log("图片大小为:" + fileSizeString);
console.log("图片类型为:" + file.type);
console.log("修改时间为:" + file.lastModifiedDate);
};
}
</script>
</head>
<body>
<input id="file" type="file" accept="image/*" />
</body>
</html>