jquery获取上传文件名称、类型和大小的代码分析

更新时间：2020-07-17 09:46:08
编辑：双元良

为找教程的网友们整理了相关的编程文章，网友方高朗根据主题投稿了本篇教程内容，涉及到jquery、上传文件、名称、类型和大小、通过jquery获取上传文件名称、类型和大小的实现代码相关内容，已被598网友关注，下面的电子资料对本篇知识点有更加详尽的解释。

参考资料

锋利的jQuery PDF 电子书 / 194.9 MB / 单东林张晓菲魏推荐度：
《jQuery应用开发实践指南》官网源代码配套资源 / 1.1 MB / Ralph Steyer 推荐度：
《从0到1:jQuery快速上手》课件,源码,习题答案配套资源 / 2.8 MB / 莫振杰推荐度：
《jQuery Mobile从入门到精通》电子资源配套资源 / 2 GB / 巅峰卓越推荐度：
《巧用JQuery》源代码配套资源 / 111.54 KB / 吴超,张帅　编著推荐度：

正文内容

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

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