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

一时失言乱红尘 2022-05-19 14:22 1146阅读 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方式在后台对文件的属性进行检验亦可。  
在近期会对此部分更新。