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

在文件上传至服务器前的关键步骤：使用jQuery获取上传文件的详细信息

你是否曾想过在用户上传文件到服务器之前，如何在前端获取并处理这些文件的详细信息？通过jQuery和HTML5 File API，我们可以轻松实现这一目标。

每当用户在网页上通过标签选择文件时，HTML5的File API允许我们在客户端访问这些文件的信息。这一API支持包括IE10+、Firefox4+、Safari5.0.5+、Opera11.1+和Chrome在内的主流浏览器。

在DOM的文件输入元素中，HTML5添加了一个名为"files"的集合。当用户通过文件输入字段选择了一个或多个文件时，这些文件会作为File对象存储在"files"集合中。每个File对象都包含了文件的详细信息，如名称、大小、类型和最后修改时间。

让我们通过一个简单的demo来体验这一过程。用户首先通过“选择文件”按钮上传文件，然后点击“显示上传文件的详细信息”来查看文件的详细信息。

HTML结构如下：

```html

```

在jQuery中，我们可以通过监听按钮点击事件，获取到用户选择的文件信息。具体的jQuery代码如下：

```javascript

$("btnShow").on('click', function() {

$("ulList").empty(); // 清空列表

var fp = $("fUpload"); // 文件输入元素

var items = fp[0].files; // 获取选择的文件集合

var fragment = ""; // 用于存储文件信息的HTML片段

if (items.length > 0) { // 如果有选中的文件

for (var i = 0; i < items.length; i++) { // 遍历每个文件

var fileName = items[i].name; // 获取文件名

var fileSize = items[i].size; // 获取文件大小（字节）

var fileType = items[i].type; // 获取文件类型（MIME类型）

// 将文件信息添加到列表中显示

fragment += "

}

// 将文件信息列表添加到ul元素中

$("ulList").append(fragment);

} else { // 如果没有选中的文件，可以在这里添加提示信息。 }});

```这段jQuery代码通过监听按钮点击事件，获取用户选择的文件信息并显示在列表中。用户可以一次选择多个文件，这些文件的详细信息会被依次显示在列表中。这样，我们就可以在上传文件到服务器之前，获取并处理这些文件的详细信息了。希望这篇文章能对你有所帮助。如果你有任何问题或需要进一步的帮助，请随时提问。