如何显示多文件上传的文件名并使用jQuery解析/保存文件

一、替换默认显示为具体文件名 #

原生<input type="file" multiple>默认只会显示文件数量，要改成展示具体文件名，需要自定义UI来覆盖默认行为：

1. 先隐藏原生输入框，用自定义按钮触发选择操作：

<!-- 隐藏原生文件输入 -->
<input type="file" id="fileInput" multiple style="display: none;">
<!-- 自定义选择按钮 -->
<button id="selectFilesBtn">选择文件</button>
<!-- 文件名展示容器 -->
<div id="fileNames"></div>

2. 用jQuery绑定事件，提取并展示选中的文件名：

$(document).ready(function() {
  // 点击按钮触发文件选择框
  $('#selectFilesBtn').click(function() {
    $('#fileInput').click();
  });

  // 文件选择完成后更新展示内容
  $('#fileInput').change(function() {
    const files = this.files;
    const fileNameContainer = $('#fileNames');
    fileNameContainer.empty(); // 清空之前的内容

    if (files.length > 0) {
      // 遍历所有选中的文件，逐个添加文件名
      $.each(files, function(index, file) {
        fileNameContainer.append(`<p>${file.name}</p>`);
      });
    }
  });
});

二、用jQuery解析并处理文件 #

1. 解析文件基础信息 #

在文件选择的change事件中，this.files是一个FileList对象，每个元素都是File实例，可直接获取文件的名称、大小、类型等信息：

$('#fileInput').change(function() {
  const files = this.files;
  $.each(files, function(index, file) {
    console.log('文件名:', file.name);
    console.log('文件大小:', file.size + ' bytes');
    console.log('文件类型:', file.type);
  });
});

2. 保存文件的两种常用方式 #

方式一：上传到后端服务器（最常用）

通过FormData构造表单数据，用AJAX发送到后端接口实现保存：

<!-- 新增上传按钮 -->
<button id="uploadBtn">上传文件</button>

<script>
$(document).ready(function() {
  $('#uploadBtn').click(function() {
    const formData = new FormData();
    const files = $('#fileInput')[0].files;

    // 将所有文件添加到FormData
    $.each(files, function(index, file) {
      formData.append('files[]', file);
    });

    // 发送AJAX请求到后端
    $.ajax({
      url: '/your-upload-endpoint', // 替换为你的后端接口地址
      type: 'POST',
      data: formData,
      processData: false, // 禁止自动处理FormData
      contentType: false, // 让浏览器自动设置Content-Type
      success: function(res) {
        console.log('上传成功:', res);
        // 可添加上传成功后的提示逻辑
      },
      error: function(xhr, status, err) {
        console.error('上传失败:', err);
      }
    });
  });
});
</script>

后端需要对应接收files[]数组，将文件保存到服务器存储位置。

方式二：前端生成下载链接（让用户手动保存到本地）

利用FileReader读取文件内容，生成下载链接供用户点击保存：

<!-- 新增下载按钮 -->
<button id="downloadFilesBtn">下载选中文件</button>

<script>
$(document).ready(function() {
  $('#downloadFilesBtn').click(function() {
    const files = $('#fileInput')[0].files;
    if (files.length === 0) return;

    $.each(files, function(index, file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        // 创建临时下载链接
        const downloadLink = $('<a>').attr({
          href: e.target.result,
          download: file.name
        });
        // 触发点击后移除链接
        downloadLink[0].click();
        downloadLink.remove();
      };
      reader.readAsDataURL(file);
    });
  });
});
</script>

注意：浏览器安全限制不允许前端直接将文件写入用户磁盘，此方式仅能生成下载链接让用户手动触发保存。

内容的提问来源于stack exchange，提问作者gokulnath