js 获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息

转自 https://www.cnblogs.com/ghfjj/p/6306386.html

文件名的传递 ---全路径获取

$('#file').change(function(){
    $('#em').text($('#file').val());
});

文件名的传递 ---只获取文件名

复制代码
复制代码
var file = $('#file'),
    aim = $('#em');
    file.on('change', function( e ){
        //e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
        var name = e.currentTarget.files[0].name;
        aim.text( name );
    });
复制代码
复制代码

获取input type="file" 选择的文件大小、文件名称、上次修改时间、类型等信息（*多个文件会存储在files数组中）

复制代码
复制代码
 1 <html xmlns="http://www.w3.org/1999/xhtml">  
 2 <head runat="server">  
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
 4     <title></title>  
 5 </head>  
 6 <body>  
 7     <form id="form1" runat="server">  
 8         <div>  
 9             <input type="file" name="f" id="f" />  
10             <input type="button" name="aa" id="aa" value="测试" onclick="javascript: _s();" />  
11         </div>  
12     </form>  
13 </body>  
14 </html>  
15 <script type="text/javascript">  
16     function _s() {  
17         var f = document.getElementById("f").files;  
18         //上次修改时间  
19         alert(f[0].lastModifiedDate);  
20         //名称  
21         alert(f[0].name);  
22         //大小 字节  
23         alert(f[0].size);  
24         //类型  
25         alert(f[0].type);  
26     }  
27 </script>
28 
29 
30 判断文件类型
31 var type=(src.substr(src.lastIndexOf("."))).toLowerCase();
32 if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
33 alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
34 return false;
35 }
复制代码
复制代码

 

利用image属性来获取input file里文件的大小：

复制代码
复制代码
<script type="text/javascript"> 
function getFilePath(filePath)
{
var image=new Image();
image.dynsrc=filePath;
alert(image.filePath);
}
</</SPAN>script> 
<body> 
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this)"> 
</</SPAN>body> 
<script type="text/javascript">
function getFileSize(fileObj)
{
var image=new Image();
image.dynsrc=fileObj.value;
alert(image.fileSize || fileObj.files[0].fileSize);
}
<script>
<body>
<INPUT TYPE="file" NAME="file" SIZE="30" onchange="getFileSize(this.value)">
<body>
复制代码
复制代码

 

*ps:下面主要谈谈另一种方式，在html标签中有一个不为一般开发人员“深”知得img标签，先来说下它有得属性：src，dynsrc，start，alt，controls，loop，loopdelay，hspace，vspace....还有一些常用得属性就不列出来了，在这里我们说一下"dynsrc"这个属性：dynsrc可以用来插入各种多媒体，格式可以是Wav、Avi、AIFF、AU、MP3、Ra、Ram等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径.

这样我们就可以根据dynsrc动态赋值任何类型文件得路径，在javascript中根据Image对象本身得fileSize属性来得到文件得大小。当然Image对象还有其它得几个属性，例如：fileCreatedDate、fileModifiedDate、fileSize、fileUpdatedDate、filters...

posted @   夏秋初  阅读(10160)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示
SQL AI 助手