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仿微信聊天界面
May 06 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery 动态粒子效果示例代码
Jul 07 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 jQuery
jQuery treeview树形结构应用
Mar 24 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
在Windows XP下安装Apache+MySQL+PHP环境
2015/02/22 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
python实现批量修改文件名代码
2017/09/10 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python3.6+django2.0开发一套学员管理系统
2018/03/03 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
优秀大学生自荐信
2014/06/09 职场文书
实习护士自荐信
2014/06/21 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
国家助学金感谢信
2015/01/21 职场文书
最美乡村教师观后感
2015/06/11 职场文书