HTML代码

<input type="file" id="deviceFile">

获取文件名、文件大小、文件类型

  $('#deviceFile').bind('input propertychange', function () {let f = document.getElementById('deviceFile').files;let [fileName, fileSize, fileType] = [f[0].name, f[0].size, f[0].type];/*分别获取   文件名   文件大小   文件类型*/$('.importBtn').hide();$(this).parent('.importBtn').next().find('dt').text(f[0].name + '.' + f[0].type);$(this).parent('.importBtn').next().find('dd').text('(' + getfilesize(f[0].size) + ')')$(this).parent('.importBtn').next().show();})

将文件大小 改成KB 、MB 、 G 、 T  格式

 function getfilesize(size) {//把字节转换成正常文件大小if (!size) return "";var num = 1024.00; //byteif (size < num)return size + "B";if (size < Math.pow(num, 2))return (size / num).toFixed(2) + "KB"; //kbif (size < Math.pow(num, 3))return (size / Math.pow(num, 2)).toFixed(2) + "MB"; //Mif (size < Math.pow(num, 4))return (size / Math.pow(num, 3)).toFixed(2) + "G"; //Greturn (size / Math.pow(num, 4)).toFixed(2) + "T"; //T}

最后展示的页面:

参考:input type=“file” 获取文件名、文件类型、文件大小_PanDa____的博客-CSDN博客_input获取文件

input type="file"获取文件名方法_已被格式化的叔叔的博客-CSDN博客

HTML,input type=“file“获取文件名、文件大小、文件类型相关推荐

  1. AngularJS 双向绑定 input type='file'中文件名,文件内容

    通过ng-model获取文件名,文件内容无效,这里用的都是双向绑定,但是双向绑定时参数传过去是undefined或者为空 <div  ng-controller="getFileCtr ...

  2. input type=file 获取选择文件名称、路径方法及input上传按钮美化

    获取文件名 document.getElementById('upload').files[0].name; 获取文件路径 document.getElementById('upload').valu ...

  3. input[type=file] 异步上传文件

    背景 UI如图所示,其中有一个拍照图标,点击后要选择拍照或者从相册中选择要上传的图片. 拍照上传部分的代码如下 html部分 <div class="take-photo"& ...

  4. html <input type=file>上传文件时,accept属性值汇总,支持文件格式,限制文件格式,限制上传图片的格式

    限制文件格式  一.示例标签1: <input type="file" accept="image/*" /> accept属性说明: image表 ...

  5. struts文件上传,获取文件名和文件类型

    Action中还有两个属性:uploadFileName和uploadContentType,这两个属性分别用于封装上传文件的文件名.文件类型.这是Struts2设计的独到之处:Strut2的Acti ...

  6. 解决利用<input type=“file“>上传文件时,value拿到的是fakePath问题

    问题:上传文件之后,直接获取input.value是fakePath路径,因此不能通过此路径访问到文件 解决方案: 若不想修改系统配置,可利用js代码解决 oInputFile.onchange = ...

  7. html元素中,可以上传文件的唯一控件就是input type=file啦

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...

  8. html input type=file

    一. input type=file与文件上传 本文所说的input type=file指的是type类型是file的input元素,最简HTML代码如下: <input type=file&g ...

  9. jq监听input type=file发生改变,即选择文件,并获取文件名称

    jq监听input type="file"发生改变,即选择文件,并获取文件名称 <input id="fileupload" name="fil ...

最新文章

  1. 【yolov3目标检测】(3) opencv+yolov3 检测交通路况,附python完整代码
  2. 程序员如何打破35岁魔咒
  3. URAL 1471 Tree
  4. 建站初期关键字的定位
  5. python雷达和柱形图_Python Pygal常见数据图(折线图、柱状图、饼图、点图、仪表图和雷达图)详解...
  6. wxWidgets:wxWindow类用法
  7. [html] 在主框架下引入的iframe,如果检测这个iframe是否能打开,如果打不开则跳到404页面
  8. Java如何将指定字符串转化为指定日期格式
  9. python编程(反汇编)
  10. 控制div的大小自适应_干货 | 浅谈模糊自适应PID控制
  11. 第一篇 Windows 8 开发Windows Metro style app环境配置
  12. 关于区块链通证模型,你想知道的都在这
  13. 理解分布式和区块链技术
  14. Maven的基本使用
  15. 【算法笔记+HDU2222】AC自动机(统计一个长字符串由多少个不同的短字符串组成)
  16. 快逸报表之在IE打印问题
  17. QGIS安装以及使用教程
  18. java 调用cmd_java打开本地应用程序(调用cmd)---Runtime用法详解
  19. # CSS 背景设置
  20. 串口调试助手总是多发送两个字节 0d 0a

热门文章

  1. 我写了个类阿里云服务器订单购买页面,赚了700¥
  2. 微积分的本质计算机的应用
  3. 用c语言输出魔方阵答案,C语言——输出“魔方阵”(带解析)
  4. cad和python哪个应该学_史上最全Python快速入门教程,满满都是干货
  5. linux基础命令随堂笔记(更新中)
  6. PLC-串口通信实例
  7. 股份有限公司章程范本
  8. PTA L3-021 神坛
  9. 03、如何使用监控工具监测服务器运行状态,并定期进行运维审计,确保服务器安全、稳定
  10. centos 一键搭建lnmp环境