这次给大家带来如何使用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 += "登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
如何操作vue-cli项目中使用bootstrap
如何操作JS获取用户所在城市及地理位置
以上就是如何使用jquery获取上传文件名称、类型和大小的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2750592.html
