通常情况下,当用户通过<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来体验一下效果。
要同时上传多个文件,需要在文件上传标签中添加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); } }); |
本文地址:http://kf.yj99.vip/zhan/q/34.html