欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

通过jquery获取上传文件名称、类型和大小的实现代码

程序员文章站 2022-09-03 14:40:17
在文件上传到服务器之前,我们可以通过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);
  }
});

这篇文章就介绍到这了,需要的朋友可以参考一下。