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

最新推荐文章于 2024-08-28 12:34:01 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2024-08-28 12:34:01 发布

阅读量8.9k

点赞数 2

分类专栏： Html 5

本文链接：https://blog.csdn.net/wangmx1993328/article/details/89180837

版权

Html 5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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="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>

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="https://libs.baidu.com/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>