通过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实现可拖动进度条实例代码
Jun 21 jQuery
jQuery实现滚动效果
Nov 17 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery制作的移动端购物车效果完整示例
Feb 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
2017/12/14 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
pandas取出重复数据的方法
2019/07/04 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
导游个人求职信范文
2014/03/23 职场文书
关于读书的演讲稿400字
2014/08/27 职场文书
毕业生实习证明
2014/09/19 职场文书
个人自我剖析材料
2014/09/30 职场文书
有限责任公司股东合作协议书范本
2014/10/30 职场文书
安全先进班组材料
2014/12/26 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
52条SQL语句教你性能优化
2021/05/25 MySQL
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL