通过jquery获取上传文件名称、类型和大小的实现代码


Posted in jQuery onApril 19, 2018

在文件上传到服务器之前,我们可以通过jquery来获取上传文件的名称,类型和尺寸大小。

通常情况下,当用户通过<input type='file'>标签来上传文件时,我们可以看到上传文件的名称。HTML5 File API为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并更好的对这些文件执行操作。

支持File API的浏览器有IE10+,Firefox4+,Safari5.0.5+,Opera11.1+和Chrome。

File API在表单的文件输入字段的基础上,又添加了一些直接访问文件信息的接口。HTML5在DOM中为文件输入元素添加了一个files集合。通过文件输入字段选择了一个或多个文件时,files集合中包含一组File对象,每个File对象对应着一个文件。每个文件都有下列的只读属性:

  • name:本地文件系统中的文件名。
  • size:文件的字节数。
  • type:文件的MIME类型。
  • lastModifiedDate:文件上一次被修改的时间。

通过这个files接口,我们就可以在jquery中获取上传文件的名称,类型和尺寸大小。通过下面的demo来体验一下效果。

1、通过“选择文件”按钮来选择要上传的文件,可以选择多个文件。

2、选择文件后点击“显示上传文件的详细信息”按钮来查看文件的详细信息。

要同时上传多个文件,需要在文件上传标签中添加multiple属性。上面demo的HTML结构如下:

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="显示上传文件的详细详细" />

在jquery代码中,首先检测被选择文件的数量,然后通过一个循环来分别获取每个文件的详细信息。完整的jquery代码如下:

$("#btnShow").on('click', function () {
  $("#ulList").empty();
  var fp = $("#fUpload");
  var lg = fp[0].files.length; // get length
  var items = fp[0].files;
  var fragment = "";
   
  if (lg > 0) {
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name; // get file name
      var fileSize = items[i].size; // get file size 
      var fileType = items[i].type; // get file type
 
      // append li to UL tag to display File info
      fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
    }
 
    $("#ulList").append(fragment);
  }
});

这篇文章就介绍到这了,需要的朋友可以参考一下。

jQuery 相关文章推荐
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 #jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
prototype class详解
2006/09/07 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
js浮动图片的动态效果
2013/07/10 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
浅析Node.js实现HTTP文件下载
2016/08/05 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[06:50]DSPL次级职业联赛十强晋级之路
2014/11/18 DOTA
python 自动提交和抓取网页
2009/07/13 Python
Python中字符串的格式化方法小结
2016/05/03 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python随机函数random()使用方法小结
2018/04/29 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
土木工程毕业生自荐信
2013/09/21 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
奉献演讲稿范文
2014/05/21 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
护士个人总结范文
2015/02/13 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书