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.Pin垂直滚动时固定导航
May 24 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
关于jQuery里prev()的简单操作代码
Oct 27 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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设计模式 Decorator(装饰模式)
2011/06/26 PHP
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
彻底删除thinkphp3.1案例blog标签的方法
2014/12/05 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vuex 动态注册方法 registerModule的实现
2019/07/03 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
Python之re操作方法(详解)
2017/06/14 Python
python如何爬取个性签名
2018/06/19 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
优秀团员自我评价范文
2014/04/23 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
公司授权委托书范文
2014/08/02 职场文书
庆六一宣传标语
2014/10/08 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
初中英语教师个人工作总结
2015/02/09 职场文书
元宵节晚会主持词
2015/07/01 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android