通过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 相关文章推荐
js和jquery中获取非行间样式
May 05 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jquery向后台提交数组的代码分析
Feb 20 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jquery插件懒加载的示例
Oct 24 jQuery
jquery插件实现代码雨特效
Apr 24 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动态生成函数示例
2014/03/21 PHP
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
php在apache环境下实现gzip配置方法
2015/04/02 PHP
PHP的Yii框架使用中的一些错误解决方法与建议
2015/08/21 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
php桥接模式应用案例分析
2019/10/23 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[原创]使用豆瓣提供的国内pypi源
2017/07/02 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
物流管理专业应届生求职信
2013/11/21 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
企业出纳岗位职责
2014/03/12 职场文书
快餐公司创业计划书
2014/04/29 职场文书
机电专业毕业生求职信
2014/07/01 职场文书
2014年营销工作总结
2014/11/22 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python