1、语法
<input name="myFile" type="file">
2、属性(以下三个仅HTML5
支持,因此存在兼容性问题)
(1)multiple
:表示用户是否可以选择多个值。multiple
只能用于type=file
和type=email
。
(2)accept
:服务器接受的文件类型,否则将被忽略。
唯一文件类型说明符是一个字符串,它描述用户可以在类型为file
的<input>
元素中选择的文件类型。 每个唯一的文件类型说明符可以采用以下形式之一:
- 一个有效的不区分大小写的文件扩展名,以句点(
"."
)开头。 例如:.jpg
,.pdf
或.doc
。 - 有效的
MIME
类型字符串,没有扩展名。 audio/*
代表声音文件。仅HTML5支持video/*
代表视频文件。仅HTML5支持image/*
表示图像文件。仅HTML5支持
accept
属性将一个字符串作为其值,该字符串包含一个或多个这些唯一文件类型说明符,以逗号分隔。 例如,需要可以作为图像呈现的内容的文件选择器(包括标准图像格式和PDF
文件)可能如下所示:
<input type="file" accept="image/*,.pdf">
(3)required
:此属性指定用户在提交表单之前必须填写一个值。
3、获取上传的文件信息
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>file multiple</title>
</head>
<body>
<input type="file" multiple="multiple" id="test">
<p id='content'></p>
<script type="text/javascript">
var test = document.getElementById('test');
test.addEventListener('change', function() {
var t_files = this.files;
var str = '';
for(var i = 0, len = t_files.length; i < len; i++) {
console.log(t_files[i]);
str += '<a href="javascript:void(0)">' + t_files[i].name + '</a><br/>';
};
document.getElementById('content').innerHTML = str;
}, false);
</script>
</body>
</html>
显示: