H5 File 对象获取 Input type=file 文件详细信息

àì夳堔傛蜴生んèń 2022-02-21 03:57 420阅读 0赞

**目录**

H5 File 对象概述

编码示例

accept 属性过滤文件类型

--------------------

**需求分析**

1、假如现在需要获取用户上传文件的详细信息，如 文件名称、文件大小、文件类型、上传修改时间等等。

![20190410133246707.png][]

# 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 对象从控制台输出的效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

> 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="https://libs.baidu.com/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){//未选中文件时，长度为0
                        var 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>

![20190410135028558.gif][]

# accept 属性过滤文件类型 #

1、accept 属性仅适用于 <input type="file">，它规定了可通过文件上传提交的文件类型。

2、提示：请不要将该属性作为您唯一的验证工具，应该在服务器上对文件上传进行验证。

3、语法：<input accept="*value*">，value 是一个或多个文件格式，多个时用 "," 隔开，如 ".png,.jpg,.gif"，不区分大小写。

[20190410133246707.png]: /images/20220221/d2822ef0ca404af38f9decb5799528f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220221/015b9f9a722c484daff44db80d89b094.png
[20190410135028558.gif]: /images/20220221/4960cd1f8f554474aa0558550591b461.png