现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2014年7月18日| 热度:℃ | 评论: |参与:

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

<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: _s();" />  
        </div>  
    </form>  
</body>  
</html>  
<script type="text/javascript">  
    function _s() {  
        var f = document.getElementById("f").files;  
        //上次修改时间  
        alert(f[0].lastModifiedDate);  
        //名称  
        alert(f[0].name);  
        //大小 字节  
        alert(f[0].size);  
        //类型  
        alert(f[0].type);  
    }  
</script>

*多个文件会存储在files数组中


下面主要谈谈另一种方式,在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... , 代码如下:


Javascript代码
javascript判断文件类型

<script type="text/javascript"> 
function getFileSize(filePath)
{
var image=new Image();
image.dynsrc=filePath;
alert(image.fileSize);
}
</</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>
var type=(src.substr(src.lastIndexOf("."))).toLowerCase();
if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");
return false;
}


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询