如何仅上传input type file选中的文件而不提交整个表单？

完全可以，你提到的实现思路是可行的，不需要提交整个表单就能通过AJAX单独上传指定文件输入框的内容。

核心实现逻辑 #

你不需要依赖表单的默认提交行为，只需要监听文件输入框的change事件，选中文件后单独创建FormData对象存储选中的文件，再通过fetch或者XMLHttpRequest发送上传请求即可，全程不会涉及表单其他字段的提交。

参考代码示例 #

HTML部分 #

<!-- 多图上传输入框，支持多选 -->
<input type="file" id="imgUpload" accept="image/*" multiple>
<!-- 图片预览区，展示已上传图片和删除按钮 -->
<div id="imgPreview"></div>

JS部分 #

const uploadInput = document.getElementById('imgUpload');
const previewArea = document.getElementById('imgPreview');
// 存储已上传的临时文件信息，提交正式表单时同步给后端即可
const uploadedTempImgs = [];

// 监听选文件事件，触发上传
uploadInput.addEventListener('change', async (e) => {
  const files = e.target.files;
  if (!files.length) return;

  // 支持批量选图，逐个上传
  for (const file of files) {
    // 仅把当前要上传的文件放入FormData，不添加其他表单字段
    const formData = new FormData();
    formData.append('temp_image', file);

    try {
      const res = await fetch('/api/upload-temp-image', {
        method: 'POST',
        body: formData
      });
      const result = await res.json();
      // 存储后端返回的临时文件标识和访问地址
      uploadedTempImgs.push({
        tempId: result.temp_id,
        url: result.temp_url
      });
      // 刷新预览区
      renderPreview();
    } catch (err) {
      console.error('图片上传失败：', err);
    }
  }

  // 清空输入框，避免重复上传同个文件，也不影响后续选新文件
  uploadInput.value = '';
});

// 已上传图片删除逻辑
function deleteTempImg(tempId) {
  // 从本地列表移除
  const targetIndex = uploadedTempImgs.findIndex(item => item.tempId === tempId);
  if (targetIndex > -1) {
    uploadedTempImgs.splice(targetIndex, 1);
    // 可选：请求后端删除临时目录的对应文件，节省服务器空间
    fetch('/api/delete-temp-image', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ temp_id: tempId })
    });
    renderPreview();
  }
}

// 渲染预览区
function renderPreview() {
  previewArea.innerHTML = uploadedTempImgs.map(item => `
    <div class="preview-item">
      <img src="${item.url}" width="100" height="100" alt="预览图">
      <button onclick="deleteTempImg('${item.tempId}')">删除</button>
    </div>
  `).join('');
}

注意事项 #

• 后端需要配套做临时文件的存储和过期清理逻辑，避免未绑定正式表单的临时文件长期占用服务器空间
• 最后提交整个调研问卷表单时，把uploadedTempImgs里的临时文件ID同步传给后端，后端将临时文件移动到正式存储目录，和问卷数据绑定即可

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