如何通过jquery获取上传文件名称、类型和大小
这篇文章将为大家详细讲解有关如何通过jquery获取上传文件名称、类型和大小,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了七星免费建站欢迎大家使用!
在文件上传到服务器之前,我们可以通过jquery来获取上传文件的名称,类型和尺寸大小。
通常情况下,当用户通过标签来上传文件时,我们可以看到上传文件的名称。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结构如下:
在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 += "
jquery是什么
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
关于“如何通过jquery获取上传文件名称、类型和大小”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
标题名称:如何通过jquery获取上传文件名称、类型和大小
链接地址:http://pwwzsj.com/article/jhdjio.html