首 页最新软件下载排行资讯教程下载专题投稿发布
pc软件下载资讯
您的位置:首 页编程开发 → jquery技巧:jquery获取上传文件名称、类型及大小示例代码分享

jquery技巧:jquery获取上传文件名称、类型及大小示例代码分享

作者:维维 日期:2018-4-20 7:27:40 人气:

jquery获取上传文件名称、类型及大小示例代码分享一览,今天要给各位朋友分享的是关于jquery获取上传文件名称、类型及大小示例代码,在文件上传到服务器之前,我们可通过jquery来获取上传文件的名称,类型和尺寸大小,那么到底是如何操作的呢,快来看看下面的详细文章吧。

大多情况之下,当用户通过<input type='file'>标签来上传文件的时候,我们能够看到上传文件的名称。HTML5 File API为我们提供了一种安全的方式,让我们在客户端访问计算机中的文件,并且能够更好的对这些文件执行操作。

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);
  }
});

支持File API的浏览器有IE10+,Firefox4+,Safari5.0.5+,Opera11.1+和Chrome。

本类热门阅览
栏目导航
相关下载