通过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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jquery实现抽奖功能
Oct 22 jQuery
jQuery实现简单评论区功能
Oct 26 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作的文本留言本的例子(五)
2006/10/09 PHP
杏林同学录(六)
2006/10/09 PHP
PHP学习散记_编码(json_encode 中文不显示)
2011/11/10 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
常用的javascript function代码
2008/05/23 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
使用webpack打包后的vue项目如何正确运行(express)
2018/10/26 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
layui table单元格事件修改值的方法
2019/09/24 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
Python中random模块用法实例分析
2015/05/19 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
django和vue实现数据交互的方法
2019/08/21 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
外企办公室竞聘演讲稿
2013/12/29 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
学校班子个人对照检查材料思想汇报
2014/09/27 职场文书
征求意见函
2015/06/05 职场文书
公司业务员管理制度
2015/08/05 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android