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

概述Web开发中，经常会涉及到文件上传。文件上传时通常都要验证文件的有效性，这个通常就要用正则表达式来判断。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

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 结构如下：

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

}

});

代码预览

<div Box-sizing: border-Box;wIDth: 100%;padding: 1em;margin-bottom: 15px;border: 1px solID #e2e2e2;overflow: hIDden;">

<script src="https://code.jquery.com/jquery-3.3.1.min.Js"></script>

<p>1、通过“选择文件”按钮来选择要上传的文件，可以选择多个文件。</p>

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

<input ID="fUpload" multiple type="file" /><br />

<ul ID="ulList">

</ul>

<input ID="btnShow" type="button" value="显示信息" />

</div>

</div>

<script>

$("#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);

}

});

</script>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的jQuery获取上传文件的名称类型大小全部内容，希望文章能够帮你解决jQuery获取上传文件的名称类型大小所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。