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

时间：2023-12-18 10:44:32

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

$('#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数组中）

<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>

判断文件类型

var type=(src.substr(src.lastIndexOf("."))).toLowerCase();

if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){

alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)！");

return false;

}

利用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... 

相关文章