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

$('#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... 

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

  1. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

  2. 获取input type=file 的文件内容（纯文本）

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

  3. html input type=file 选择图片,图片预览 纯html js实现图片预览

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  5. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  6. js 清空 input[type=file]的值

    js 不能操作 input[type=file]但你可以将这个 input 的 dom 元素删除掉,再新增一个,或者替换掉 $("#UploadFile").replaceWith ...

  7. input type=file 选择图片并且实现预览效果

    通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型,如:只要传图片,且不限制图片格式,为image/*: multiple:规定是否 ...

  8. 【原创】js中input type=file的一些问题

    1.介绍 在开发中,文件上传必不可少,input[type=file] 是常用的上传标签,但是它长得又丑.浏览的字样不能换,但是他长得到底有多丑呢.我们来看看在不同浏览器里的样子吧. <inpu ...

  9. 获取 input type="file" 标签的内容,并使用ajax进行请求到服务器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Qt编写自定义控件39-导航标签

    一.前言 在很多菜单导航界面中,当单击了二级菜单或者三级菜单以后,顶部会显示带箭头或者其他标识的导航标签,可以单击该标签快速切换到对应的界面,也作为指示当前处于哪一级菜单下的界面,主要在WEB中大肆流 ...

  2. Linux -- Reactor

    结构 1. handles 资源的标志.这些资源通常包含网络连接,文件,定时器,同步对象等.handles 被用在注册服务器来标记socket,以便同步事件复用(Synchronous Event D ...

  3. react中如何实现一个按钮的动态隐藏和显示（有效和失效）

    初始准备工作 constructor(props) { super(props); /* * 构建导出数据的初始参数,结合用户下拉选择后动态设置参数值 * */ this.state = { btnS ...

  4. Ajax校验--最近更新

    Ajax(Asynchronous JavaScript and Xml) 整合了JavaScript,XML,CSS,DOM,Ajax引擎(XMLHttpRequest). JavaScript语言 ...

  5. 用Python做一个简单的小游戏

    学习总是枯燥的,对于Python小白的我来讲,更是乏味的.为了提高学习的兴趣,今天我就来写一个小程序练练手. 数字猜谜游戏相信大家都不陌生,A给出最小值最大值,B写一个该范围内的数,A猜测写下的是多少 ...

  6. Flutter布局--appbar导航栏和状态栏

    MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...

  7. MySQL的注入总结

    0x01 MySQL 5.0以上和MySQL 5.0以下版本的区别 MySQL5.0以上版本存在一个叫information_schema的数据库,它存储着数据库的所有信息,其中保存着关于MySQL服 ...

  8. 人工神经网络反向传播算法（BP算法）证明推导

    为了搞明白这个没少在网上搜,但是结果不尽人意,最后找到了一篇很好很详细的证明过程,摘抄整理为 latex 如下. (原文:https://blog.csdn.net/weixin_41718085/a ...

  9. 深入理解linux内核-进程和程序

    进程描述符task_struct task_struct { //进程基本信息 pid 进程id号 tgid 线程组id号,与线程组领头线程pid号相同   getpid()返回该值 tasks in ...

  10. 【leetcode算法-中等】2. 两数相加

    [题目描述] 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表 ...