您现在的位置是:群英 > 开发技术 > web开发
jQuery获取上传文件的主要信息方法是什么
Admin发表于 2022-04-28 11:54:59228 次浏览
这篇文章给大家介绍了“jQuery获取上传文件的主要信息方法是什么”的相关知识,讲解详细,步骤过程清晰,对大家进一步学习和理解“jQuery获取上传文件的主要信息方法是什么”有一定的帮助,希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。


在文件上传到服务器之前,我们可以通过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获取上传文件的主要信息方法是什么已经有了进一步的了解,如果想要了解更多相关的内容,欢迎关注群英网络,群英网络将为大家推送更多相关知识点的文章。

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

标签: jquery获取文件
相关信息推荐
2022-01-11 18:34:55 
摘要:这篇文章给大家分享的是python使用openpyxl画散点图的方法,openpyxl是Python的第三方库,文中示例对大家学习openpyxl的使用有一定的帮助,有需要的朋友可以了解了解,接下来就跟随小编一起学习一下吧。
2022-02-08 20:10:10 
摘要:这篇文章我们来了解Java流程控制的相关内容,对新手学习和理解Java流程控制有一定的帮助,下文的介绍很详细,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!
2022-05-18 17:42:55 
摘要:1、基本数据类型数据类型有很多,先研究一下基础的,例如:布尔型、数字类型、字符串类型。数字类型有uint8、uint16、uint32、uint64、int8、int16、int32、int64(ui
推荐内容
热门关键词
热门信息
群英网络助力开启安全的云计算之旅
立即注册,领取新人大礼包
  • 联系我们
  • 24小时售后:4006784567
  • 24小时TEL :0668-2555666
  • 售前咨询TEL:400-678-4567

  • 官方微信

    官方微信
Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
微信公众号
返回顶部
返回顶部 返回顶部