关于js中的文件上传域

最新推荐文章于 2021-06-18 23:51:15 发布

nhw649

最新推荐文章于 2021-06-18 23:51:15 发布

阅读量189

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/qq_46176479/article/details/108064022

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> 文件上传域 </title>
</head>

<body>
    浏览图片：<input id="images" type="file" multiple accept="images/*.jpg" />
    <input type="button" value="显示文件" onclick="showDetails();" />
    <script type="text/javascript">
        var showDetails = function () {
            //把文件域对象取出来，放在变量imageEle里
            var imageEle = document.getElementById("images");
            // 获取文件上传域内输入的多个文件
            var fileList = imageEle.files;
            // 遍历每个文件
            for (var i = 0; i < fileList.length; i++) {
                //依次取出每个文件
                var file = fileList[i];
                var div = document.createElement("div");
                // 依次读取每个文件的文件名、文件类型、文件大小
                div.innerHTML += "第" + (i + 1) + "个文件的文件名是：" + file.name + "，该文件类型是：" + file.type + "，该文件大小为：" +
                    file.size; // 把div元素添加到页面中。
                document.body.appendChild(div);
            }
        }
    </script>
</body>

</html>