通过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制作的放大效果的popup对话框(未添加任何jquery plugin)分享
分享一个JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)项目中可以根据自己的需求来写css,感兴趣的朋友可以了解下哈2013-04-04jQuery通过改变input的type属性实现密码显示隐藏切换功能
大家在做登录注册功能的时候都会遇到用户选择自己输入的密码是否显示需求,大家都是怎么实现的呢?今天小编给大家分享一种比较好用的方法jQuery通过改变input的type属性实现密码显示隐藏切换功能,需要的朋友参考下2017-02-02jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
由于要获取某列中的一个ID值,如果用JS传值的方式此问题就不存在,由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得2013-04-04Bookmarklet实现启动jQuery(模仿 云输入法)
最近流行的 sogo云输入法, QQ云输入法,都用到了bookmarklet技术。2010-09-09
最新评论