10.2 文件 API 之 Bolb 对象
Blob 对象
这是在 HTML5 中新增的一个对象，它表示的是原始的二进制数据，之前讲到的 file 也是继承自 blob 对象，该对象有两个属性，一个是 size ，表示它所代表的文件的大小。还有 type 属性表示类型，未知类型文件将返回一个空的字符串。
我们看一下具体的写法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script>
function showFileInfo () {
var file;
file = document.getElementById("file").files[0];
var size = document.getElementById("size");
size.innerHTML = file.size;
var type = document.getElementById("type");
type.innerHTML = file.type;
}
</script>
</head>
<body>
选择文件：
<input type="file" id="file" multiple>
<input type="button" onclick="showFileInfo()" value="显示文件信息"><br/>
文件大小：<span id="size"></span> <br/>
文件类型：<span id="type"></span>
</body>
</html>然后选择一个图片文件，效果：
可以很明确的看到文件的大小和类型。这就是 blob 的使用方式。我们再来实现一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script>
function FileUpload () {
var file;
for (var i=0; i< document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
if (!/image\/\w+/.test(file.type)) {
alert ("请上传身份证照片");
}else {
console.log("好好好");
}
}
}
</script>
</head>
<body>
<input type="file" id="file" multiple>
<input type="button" onclick="FileUpload()" value="上传">
</body>
</html>这是一个检测上传文件类型的例子，如果上传的文件不是图片就给出提示。
当我们上传的并不是图片文件的话：
只有正确上传了图片我们就在控制台看到了打印信息：
查看17道真题和解析