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

最新推荐文章于 2024-08-06 15:05:05 发布

在线小白www

最新推荐文章于 2024-08-06 15:05:05 发布

阅读量2.4k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_43654065/article/details/112664965

版权

JavaScript 专栏收录该内容

128 篇文章 7 订阅

订阅专栏

转载：原文

html

   <input type="file" class="select-file"></input>

1. jquery获取文件大小等信息

获取上传文件的绝对路径

$('.select-file').change(function(){
	console.log($('.select-file').val());
})

获取文件详细信息

$('.select-file').change(function(){
	console.log(e.currentTarget.files);
	 //上次修改时间
    console.log(files[0].lastModifiedDate);
    //名称
    console.log(files[0].name);
    //大小 字节
    console.log(files[0].size);
    //类型
    console.log(files[0].type);
})

2. javascript获取文件大小、文件名称、上次修改时间、类型等信息（多个文件会存储在files数组中）

<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="test();" />
        </div>
    </form>
</body>
</html>
<script type="text/javascript">

    function test() {
        var f = document.getElementById("f").files;
        var name = f[0].name
        //上次修改时间
        console.log(f[0].lastModifiedDate);
        //名称
        console.log(f[0].name);
        //大小 字节
        console.log(f[0].size);
        //类型
        console.log(f[0].type);
        //判断文件类型
		var type=(name.substr(name.lastIndexOf("."))).toLowerCase();
		if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
		console.log("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");
		return false;
		}
    }


</script>

ps:

下面主要谈谈另一种方式，在html标签中有一个不为一般开发人员深知的img标签，先来说下它的属性：src、dynsrc、start、alt、controls、loop等，在这里我们说一下dynsrc这个属性。dynsrc可以用来插入各种多媒体，格式可以是Wav、Avi、AIFF、AU、MP3、Ra、Ram等。url为音频或视频文件及其路径，可以是相对路径或者绝对路径。
这样我们可以根据dynsrc动态赋值任何类型文件的路径，在JavaScript中根据image对象本身的fileSize属性来得到文件的大小。当然Image对象还有其他几个属性，例如：fileCreatedDate、fileModifiedDate、fileSize。。。