js获取上传文件的后缀名和大小

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

东都花神

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

阅读量1.1w

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/qq_33988065/article/details/56841587

版权

js 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

利用H5的新特性我们可以十分方便的获取上传文件的后缀名和大小，对于上传文件的校验十分方便，下面是具体的实现代码：

在线体验： https://nk5qy2lwvj.codesandbox.io/

源码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <input type="file"  id="file"/>
    <button>清空</button>
    <script type="text/javascript">
       $('input').on('change', function () {
          alert('上传文件后缀名为：' + this.value.toLowerCase().split('.').splice(-1));
          alert('上传文件大小为：' + this.files[0].size/1024 + 'kb');
       });
       
       $('button').on('click', function () {
        	var objFile = document.getElementById("file")
           	objFile.outerHTML=objFile.outerHTML.replace(/(value=\").+\"/i,"$1\"");  
       });
    </script>
</body>
</html>