动态文件上传表单字段能否提交前保存？Tile表单文件需延迟上传

问题1：动态文件上传表单字段能否在提交前保存？ #

完全可以实现提交前的暂存，这里给你几种实用的方案：

• 用FormData临时存储：每当用户选择文件或者动态生成字段时，把对应的文件数据追加到一个全局的FormData实例中。这样在最终提交时直接使用这个实例发送请求即可，示例代码如下：

  // 初始化全局FormData实例
  const tempFormData = new FormData();
  
  // 监听所有动态生成的文件输入框的change事件
  document.addEventListener('change', (e) => {
    if (e.target.type === 'file' && e.target.files.length > 0) {
      // 用tile的标识作为字段名前缀，区分不同tile的文件
      const uniqueFieldName = `${e.target.dataset.tileId}-upload-file`;
      // 如果用户重新选择文件，先移除旧的记录
      tempFormData.delete(uniqueFieldName);
      // 添加新的文件数据
      tempFormData.append(uniqueFieldName, e.target.files[0]);
    }
  });
  

• 读取文件内容到内存（支持跨会话暂存）：如果需要把文件暂时存在浏览器中（比如刷新页面后还能保留），可以用FileReader把文件转成Base64格式，存在变量或者localStorage里（注意localStorage有5MB左右的大小限制，大文件不推荐用这个方式）：

  // 用于存储所有tile的文件数据
  const savedFileRecords = {};
  
  document.addEventListener('change', (e) => {
    if (e.target.type === 'file' && e.target.files.length > 0) {
      const file = e.target.files[0];
      const reader = new FileReader();
      
      reader.onload = function(event) {
        // 把文件信息和Base64数据存在对象里
        savedFileRecords[e.target.dataset.tileId] = {
          fileName: file.name,
          fileType: file.type,
          base64Data: event.target.result
        };
        // 如果需要跨会话保存，也可以存到localStorage
        // localStorage.setItem(`tile-${e.target.dataset.tileId}-file`, JSON.stringify(savedFileRecords[e.target.dataset.tileId]));
      };
      
      reader.readAsDataURL(file);
    }
  });
  
  // 提交时把Base64转回Blob，再加入FormData
  function handleSubmit() {
    const submitData = new FormData();
    Object.keys(savedFileRecords).forEach(tileId => {
      const fileInfo = savedFileRecords[tileId];
      const blob = convertBase64ToBlob(fileInfo.base64Data);
      submitData.append(`${tileId}-file`, blob, fileInfo.fileName);
    });
    // 这里发送submitData到后端即可
    fetch('/upload-endpoint', { method: 'POST', body: submitData });
  }
  
  // 辅助函数：Base64转Blob
  function convertBase64ToBlob(base64Str) {
    const [mimePart, dataPart] = base64Str.split(',');
    const mime = mimePart.split(':')[1].split(';')[0];
    const byteString = atob(dataPart);
    const ab = new ArrayBuffer(byteString.length);
    const uint8Arr = new Uint8Array(ab);
    
    for (let i = 0; i < byteString.length; i++) {
      uint8Arr[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: mime });
  }
  

问题2：文件选择后不立即执行上传操作 #

这其实是原生文件输入框的默认行为呀！<input type="file">在用户选择文件后，只会触发change事件，不会自动发起上传请求。你只需要不在change事件里编写上传逻辑，把上传操作延迟到用户点击提交按钮、或者你设定的其他时机即可。

举个简单的实现例子：

<!-- 动态生成的文件输入框（示例） -->
<input type="file" data-tile-id="tile-1">
<input type="file" data-tile-id="tile-2">
<!-- 统一的提交按钮 -->
<button id="submitAllBtn">提交所有表单</button>

const tempFormData = new FormData();

// 只在change事件里暂存文件，不上传
document.addEventListener('change', (e) => {
  if (e.target.type === 'file' && e.target.files.length > 0) {
    const fieldName = `${e.target.dataset.tileId}-file`;
    tempFormData.delete(fieldName);
    tempFormData.append(fieldName, e.target.files[0]);
  }
});

// 点击提交按钮时才触发上传
document.getElementById('submitAllBtn').addEventListener('click', () => {
  fetch('/your-upload-api', {
    method: 'POST',
    body: tempFormData
  })
  .then(res => res.json())
  .then(result => console.log('上传成功:', result))
  .catch(err => console.error('上传失败:', err));
});

这样用户选完文件后，文件会被暂存起来，直到用户主动点击提交按钮，才会发起上传请求，完全符合你的需求。

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