HTML/CSS

jQuery获取上传文件的名称类型大小

阿里云

Web 开发中,经常会涉及到文件上传。文件上传时通常都要验证文件的有效性,这个通常就要用正则表达式来判断。通常情况下,当用户通过<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 结构如下:

  1. <input id="fUpload" multiple type="file" /><br />
  2. <ul id="ulList"></ul>
  3. <input id="btnShow" type="button" value="显示详细" />

在 jquery 代码中,首先检测被选择文件的数量,然后通过一个循环来分别获取每个文件的详细信息。完整的 jquery 代码如下:

  1. $("#btnShow").on('click', function () {
  2.     $("#ulList").empty();
  3.     var fp = $("#fUpload");
  4.     var lg = fp[0].files.length; // get length
  5.     var items = fp[0].files;
  6.     var fragment = "";
  7.  
  8.     if (lg > 0) {
  9.         for (var i = 0; i < lg; i++) {
  10.             var fileName = items[i].name; // get file name
  11.             var fileSize = items[i].size; // get file size 
  12.             var fileType = items[i].type; // get file type
  13.  
  14.             // append li to UL tag to display File info
  15.             fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
  16.         }
  17.  
  18.         $("#ulList").append(fragment);
  19.     }
  20. });

1、通过“选择文件”按钮来选择要上传的文件,可以选择多个文件。

2、选择文件后点击“显示详细”按钮来查看文件的详细信息。

jQuery 获取上传文件的名称类型大小

已有 559 人购买
查看演示升级 VIP立刻购买

收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!