目录
H5 File 对象概述
编码示例
accept 属性过滤文件类型
需求分析
1、假如现在需要获取用户上传文件的详细信息，如 文件名称、文件大小、文件类型、上传修改时间等等。
H5 File 对象概述
1、文件上传表单如下所示：method 必须是 post、enctype 必须是multipart/form-data 类型、如果是多文件上传，则在 type=file 中加上 multiple 属性。
2、需要知道的是：“每一个 type=file的 input 都是一个 File 对象数组 ”。（注意 File 是 DOM 对象）
<form method="post" enctype="multipart/form-data">单文件上传：<input type="file" id="fileUp"></form><form method="post" enctype="multipart/form-data">多文件上传：<input type="file" id="fileUps" multiple></form>
3、File 对象从控制台输出的效果如下：
lastModified ：最后一次修改时间(毫秒数)
lastModifiedDate ： 最后一次修改日期
name ：文件名
type ：文件类型（需要注意的是，它并不能完全识别出所有文件类型）
size ：文件大小 ，单位 字节。
编码示例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><script src="/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">$(function () {//单文件上传$("#fileUp").on("change", function () {//$(this)[0] 等价于 $(this).get(0)，将 JQuery 对象转为 DOM 对象，files 为其属性，得到的是一个文件对象数组var files = $(this)[0].files;if(files.length>0){//未选中文件时，长度为0var file = files[0];//因为是单文件上传，所以只有一个文件（File）对象console.log(file);//下面所有的属性都可以从此对象的输出得到console.log("文件名称：" + file.name + ",文件大小：" + file.size + "字节,文件类型："+ file.type + ",上次修改时间：" + file.lastModifiedDate);}});//多文件上传$("#fileUps").on("change", function () {//$(this)[0] 等价于 $(this).get(0)，将 JQuery 对象转为 DOM 对象，files 为其属性，得到的是一个文件数组var files = $(this).get(0).files;for (var i = 0; i < files.length; i++) {console.log((i + 1) + "：文件名称：" + files[i].name + ",文件大小：" + files[i].size + "字节,文件类型："+ files[i].type + ",上次修改时间：" + files[i].lastModifiedDate);}});});</script></head><body><form method="post" enctype="multipart/form-data">单文件上传：<input type="file" id="fileUp"></form><form method="post" enctype="multipart/form-data">多文件上传：<input type="file" id="fileUps" multiple></form></body></html>
accept 属性过滤文件类型
1、accept 属性仅适用于 <input type="file">，它规定了可通过文件上传提交的文件类型。
2、提示：请不要将该属性作为您唯一的验证工具，应该在服务器上对文件上传进行验证。
3、语法：<input accept="value">，value 是一个或多个文件格式，多个时用 "," 隔开，如 ".png,.jpg,.gif"，不区分大小写。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><title></title><script src="/jquery/2.1.4/jquery.min.js"></script></head><body><form method="post" enctype="multipart/form-data" action="#"><!-- 只允许上传 .png、gif、jpg、jpeg 格式的文件，不区分大小写-->单文件上传： <input type="file" name="pic" accept=".gif,.jpg,.png,.jpeg"/><button type="submit">上传</button></form></body></html>
