Laravel 8 如何在提交表单前显示已上传文件名并支持删除操作

这个功能的核心逻辑在前端实现，后端原有存储逻辑几乎不需要修改，具体操作如下：

1. 修改视图代码 #

你需要在原有文件上传输入框的基础上，新增文件列表展示容器，再添加JavaScript逻辑处理文件选择、列表渲染和删除操作，完整代码如下：

<div class="mb-3">
   <label for="formFileMultiple" class="form-label" >Receita</label>
   <input class="form-control" type="file" id="formFileMultiple" name="files[]" multiple>
   <!-- 新增：文件列表展示容器 -->
   <div id="fileList" class="mt-2"></div>
</div>

<script>
// 存储用户选中的文件对象
const fileTransfer = new DataTransfer();
const fileInput = document.getElementById('formFileMultiple');
const fileListContainer = document.getElementById('fileList');

// 监听文件选择事件
fileInput.addEventListener('change', function() {
  // 将新选中的文件添加到存储对象
  for (const file of this.files) {
    fileTransfer.items.add(file);
  }
  // 更新输入框的文件列表
  fileInput.files = fileTransfer.files;
  // 渲染文件列表
  renderFileList();
});

// 渲染文件列表方法
function renderFileList() {
  fileListContainer.innerHTML = '';
  for (let i = 0; i < fileTransfer.files.length; i++) {
    const file = fileTransfer.files[i];
    const fileItem = document.createElement('div');
    fileItem.className = 'd-flex justify-content-between align-items-center border p-2 mb-1 rounded';
    fileItem.innerHTML = `
      <span>${file.name}</span>
      <button type="button" class="btn btn-sm btn-danger delete-file" data-index="${i}">删除</button>
    `;
    fileListContainer.appendChild(fileItem);
  }

  // 绑定删除按钮事件
  document.querySelectorAll('.delete-file').forEach(btn => {
    btn.addEventListener('click', function() {
      const index = parseInt(this.dataset.index);
      // 移除对应下标的文件
      fileTransfer.items.remove(index);
      // 更新输入框的文件列表
      fileInput.files = fileTransfer.files;
      // 重新渲染列表
      renderFileList();
    });
  });
}
</script>

如果你用了Bootstrap框架，上面的样式类可以直接生效，没有的话自己调整对应样式即可。

2. 后端控制器优化 #

原有控制器的存储逻辑不需要修改，只需要新增文件存在的判断，避免用户没上传文件时出现报错：

// 先判断是否有上传文件
if ($request->hasFile('files')) {
    foreach ($request->file('files') as  $file) {
        Document::create([
            'COD_TIPO_DOCUMENTO'    => 1,
            'NOME_DOCUMENTO'        => $file->getClientOriginalName(),
            'DS_CAMINHO_DOCUMENTO'  => $file->store('orders'),
            'DT_CADASTRO'           => Carbon::now(),
            'NOME_EXTENSAO'         => $file->getClientOriginalExtension(),
            'DS_MIME_TYPE'          => $file->getClientMimeType()
        ]);
    }
}

实现效果 #

用户选择文件后会立刻在输入框下方展示所有选中的文件名，点击对应文件后的删除按钮即可移除该文件，表单提交时只会提交用户保留的文件，和原有提交逻辑完全兼容。

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