通过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库冲突的完美解决办法
May 20 jQuery
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 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 开发环境配置(Zend Studio)
2010/04/28 PHP
php给图片加文字水印
2015/07/31 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
鼠标滚轴控制文本框值的JS代码
2013/11/19 Javascript
js 数组操作之pop,push,unshift,splice,shift
2014/01/29 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
2015/08/27 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python格式化输出%s和%d
2018/05/07 Python
python实现连续图文识别
2018/12/18 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
keras实现多GPU或指定GPU的使用介绍
2020/06/17 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
如何转换一个字符串到enum值
2014/04/12 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
表彰会主持词
2014/03/26 职场文书
创先争优活动心得体会
2014/09/04 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
如何通过cmd 连接阿里云服务器
2022/04/18 Servers
Redis基本数据类型List常用操作命令
2022/06/01 Redis
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS