一、FileList对象与file对象
FileList对象表示用户选择的文件列表。在HTML4 中,file控件内只允许放置一个文件,但在HTML 5中,添加multiple属性,file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象,而FileList对象对象则为这些file对象的列表,代表用户选择的所有文件。
file对象由两个属性:
1.name属性表示文件名不包括路径
2.lastModifiedDate属性表示文件的最后修改日期
accept=”image/*” 表示只能接收图像
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>文件上传</title>
</head>
<body>
<input type="file" id="file" multiple size="80" accept="image/*" />
<input type="button" value="文件上传" onclick="showFiles();" />
<script>
/*获取多个文件*/
function showFiles(){
//files返回FileList文件列表对象
var file = document.getElementById("file");
for(var i=0;i<file.files.length;i++){
//获取单个文件
singleFile = file.files[i];
//获取文件名
console.log(singleFile.name);
//获取文件修改时间
console.log(singleFile.lastModifiedDate);
}
}
</script>
</body>
</html>
二、Blob对象
Blob表示二进制原始数据,它提供一个slice方法,通过该方法访问到字节内部的原始数据块。
Blob对象有两个属性:
1.size属性表示一个Blob对象的字节长度
2.type属性表示Blob的MIME类型,如果是未知类型,则返回一个空字符串
<input type="file" id="file" multiple size="80" accept="image/*">
<input type="button" value="显示文件信息" onclick="showFileType()"><br/>
文件字节长度:<span id="size"></span><br/>
文件类型:<span id="type"></span>
/*显示文件信息*/
function showFileType(){
//files[0]获取一个文件
var file = document.getElementById("file").files[0];
var size = document.getElementById("size");
//文件字节长度(B)
size.innerHTML = file.size/1024+"KB";
var type = document.getElementById("type");
//文件类型
type.innerHTML = file.type;
}
注意:对于图像类型的文件,Blob对象的type属性都是以”image/”开头的,后跟图像类型,利用此特性我们可以在JavaScript中判断用户选择的文件是否为图像文件,如果是批量上传时,如果用户选择的多个文件中有不是图像的文件时,可以弹出错误提示信息,并停止后面的文件上传,或者跳过这个文件,不将该文件上传
<input type="button" value="文件上传" onclick="fileUpload()">
function fileUpload(){
var file = document.getElementById("file");
for(var i=0;i<file.files.length;i++){
singleFile = file.files[i];
/* var reg = /image\/\w+/;
*判断是否为"image/xxx"格式字符串
* image\/ 匹配image/
* \w+ 匹配一个单字符(字母,数字或下划线)
* 第一个/及最后一个/ 表示下一个字符具有特殊用处
*/
if(!/image\/\w+/.test(singleFile.type)){
alert(singleFile.name+"不是图像文件!");
break;
}else {
alert("开始上传");
}
}
}