jquery获取file表单选择文件的路径、名字、大小、类型


Posted in jQuery onJanuary 18, 2019

一、问题

在使用file表单时想知道选择的文件的路径、名字、大小、类型?

二、知识点

1.input表单会触发change事件

2.获取路径   触发这个事件的对象调用val()函数

3.文件名  触发事件后会有一个事件对象e.currentTarget.files[0].name

4.文件大小   e.currentTarget.files[0].size     字节

5.文件类型   e.currentTarget.files[0].type

三、测试代码

<body>
  <p class="inp_file_name">未选择</p>
  <input type="file" class="inp_file">
  <button class="cancel_file_but">清除选择的文件</button>
</body>
<script src="./js/jquery-3.3.1.js"></script>
<script>
  $('.inp_file').change(function(e){
    // console.log($(this).val());//val()获取到的是完整的文件路径值;C:\fakepath\js-dom.png
    console.log(e)
    /*
    简单的获取选择文件的名字
    currentTarget:获取到的是绑定事件的对象
    e.currentTarget.files 是一个数组,如果支持多个文件,则需要遍历
    */
    var fileMsg = e.currentTarget.files;
    var fileName = fileMsg[0].name;
    console.log(fileName);//js-dom.png
    //大小 字节 
    var fileSize = fileMsg[0].size;
    console.log(fileSize);//350061
    //类型 
    var fileType = fileMsg[0].type;
    console.log(fileType);//image/png
    // 判断文件类型
    var type=(fileType.substr(fileType.lastIndexOf("."))).toLowerCase();
    if(type!=".jpg"&&type!=".gif"&&type!=".jpeg"&& type!=".png"){
      alert("您上传图片的类型不符合(.jpg|.jpeg|.gif|.png)!");
       return false;
    }
    $('.inp_file_name').text(fileName)
  })
  $('.cancel_file_but').click(function(){
    $('.inp_file').val(null);
  })
</script>

四、效果

未选前

jquery获取file表单选择文件的路径、名字、大小、类型

选择后

jquery获取file表单选择文件的路径、名字、大小、类型

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

jQuery 相关文章推荐
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery实现 RadioButton做必选校验功能
Jun 15 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery实现聊天机器人
Feb 08 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
You might like
php设计模式 Facade(外观模式)
2011/06/26 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php抛出异常与捕捉特定类型的异常详解
2016/10/26 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
2014/03/18 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
进一步探究Python的装饰器的运用
2015/05/05 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
应届生保险求职信
2013/11/11 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
办公室岗位职责
2014/02/12 职场文书
读书活动总结范文
2014/04/26 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
广播体操口号
2014/06/18 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2016元旦晚会主持词
2015/07/01 职场文书