type="file" H5文件操作 _小知识

file 对象的属性：• name : 文件名，不包含路径。
• type : 文件类型。图片类型的文件都会以 image/ 开头，可以由此来限制只允许
上传图片。
• size : 文件大小。可以根据文件大小来进行其他操作。
• lastModified : 文件最后修改的时间。
代码：

文章插图

输出结果：

文章插图

accept 属性input 中有个 accept 属性，可以用来规定能够通过文件上传进行提交的文件
类型。accept="image/*" 可以用来限制只允许上传图像格式。但是在 Webkit 浏览器
下却出现了响应滞慢的问题，要等上好几秒才弹出文件选择框。解决方法就是将 * 通配符改为指定的 MIME 类型。

文章插图

代码直接复制就可以使用<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【type="file" H5文件操作】<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" id="files" accept="image/gif,image/jpeg,image/jpg,image/png">
<script>
var elem = document.getElementById('files');
elem.onchange = function () {
console.log(this.files)
}
</script>
</body>
</html>