js获取upload上传的文件属性(大小、名称、修改时间、类型等)

最新推荐文章于 2024-05-19 18:33:52 发布

lijwen

最新推荐文章于 2024-05-19 18:33:52 发布

阅读量9.4k

点赞数 1

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

本文链接：https://blog.csdn.net/java_18945106612/article/details/81218944

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文件上传下载在日常开发中是常用的功能。
但是因业务要求，经常对上传的文件做限制要求，如只能上传jpg格式的图片，仅能上传xls的excel表格(xls和xlsx的内容读写java使用的是不同的jar包)。
这类需求可以通过ajax在后台进行处理，但是为了减少对系统的压力，我们选择通过js的方式控制。

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
</head>  
<body>  
<form id="form1" runat="server">  
   <div>  
     <input type="file" name="f" id="f" />  
     <input type="button" name="aa" id="aa" value="测试" onclick="javascript: check();" />  
  </div>  
</form>  
</body>  
</html>  
<script type="text/javascript">  
    function check() {  
        // 获取文件
        var f = document.getElementById("f").files;  
        // 获取文件后缀
        var suffixname = f[0].name.substr(f[0].name.lastIndexOf(".")).toLowerCase();

        // 文件后缀名
        alert("[文件后缀名]"+suffixname );
        //上次修改时间  
        alert("[上次修改时间]" + f[0].lastModifiedDate);  
        //名称  
        alert("[名称]" + f[0].name);  
        //大小 字节  
        alert("[大小 字节]" + f[0].size);  
        //类型  
        alert("[类型]" + f[0].type);  
    }  
</script>


// 判断文件类型
// var type=(src.substr(src.lastIndexOf("."))).toLowerCase();
// if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
// alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
// return false;
}

通过 document.getElementById(“f”).files; 的方式获取上传附件对象；
上次修改时间 - f[0].lastModifiedDate;
名称 - f[0].name;
大小字节 - f[0].size;
类型 - f[0].type;
后缀名 -f[0].name.substr(f[0].name.lastIndexOf(“.”)).toLowerCase();

通过上述方式在js中编辑提示信息、确认是否上传后台的方式减少对服务器的访问压力，更快的反馈信息，提高用户体验。

此外通过java方式在后台对文件的属性进行检验亦可。
在近期会对此部分更新。

lijwen

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js获取upload上传的文件属性(大小、名称、修改时间、类型等)

文件上传下载在日常开发中是常用的功能。但是因业务要求，经常对上传的文件做限制要求，如只能上传jpg格式的图片，仅能上传xls的excel表格(xls和xlsx的内容读写java使用的是不同的jar包)。这类需求可以通过ajax在后台进行处理，但是为了减少对系统的压力，我们选择通过js的方式控制。&amp;lt;html xmlns=&quot;http://www.w3.org/1999/xht...
复制链接

扫一扫