如何通过按钮重置<input type="file">为“未选择文件”及Ajax保存后卸载图片

嘿，这两个需求本质上是同一个问题——如何把文件选择框重置回“未选择文件”的初始状态，我给你分场景整理了实用的实现方案，都是现代浏览器通用的：

一、点击按钮触发重置 #

直接给按钮绑定点击事件，清空文件输入框的value属性就行，简单高效：

<input type="file" id="fileInput">
<button id="resetBtn">重置选择</button>

<script>
document.getElementById('resetBtn').addEventListener('click', function() {
  const fileInput = document.getElementById('fileInput');
  fileInput.value = ''; // 核心操作：清空value即可重置状态
});
</script>

原理：<input type="file">的value存储的是文件的伪路径（出于安全限制），把它设为空字符串就能让组件回到初始状态，所有现代浏览器都支持这个方法。

二、Ajax保存文件后自动重置 #

在Ajax请求的成功回调里执行同样的重置操作就行，不管你用原生API还是jQuery，逻辑都一致：

原生Fetch实现 #

<input type="file" id="fileInput">
<button id="saveBtn">保存文件</button>

<script>
document.getElementById('saveBtn').addEventListener('click', async function() {
  const fileInput = document.getElementById('fileInput');
  const targetFile = fileInput.files[0];
  
  if (!targetFile) {
    alert('请先选择文件');
    return;
  }

  // 构建上传用的FormData
  const formData = new FormData();
  formData.append('uploadFile', targetFile);

  try {
    const response = await fetch('/your-save-api', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      // 保存成功后立即重置状态
      fileInput.value = '';
      alert('文件保存成功！');
    } else {
      alert('文件保存失败，请重试');
    }
  } catch (err) {
    console.error('请求出错:', err);
    alert('网络异常，请稍后再试');
  }
});
</script>

jQuery Ajax实现（如果项目用jQuery的话） #

<input type="file" id="fileInput">
<button id="saveBtn">保存文件</button>

<script>
$('#saveBtn').click(function() {
  const fileInput = $('#fileInput')[0];
  const targetFile = fileInput.files[0];
  
  if (!targetFile) {
    alert('请先选择文件');
    return;
  }

  const formData = new FormData();
  formData.append('uploadFile', targetFile);

  $.ajax({
    url: '/your-save-api',
    type: 'POST',
    data: formData,
    contentType: false, // 必须设置，否则FormData会被错误解析
    processData: false, // 必须设置，避免jQuery自动处理数据
    success: function() {
      // 成功回调里重置状态
      fileInput.value = '';
      alert('文件保存成功！');
    },
    error: function() {
      alert('文件保存失败，请重试');
    }
  });
});
</script>

兼容旧浏览器的备选方案（比如IE10及更早） #

如果需要支持非常老的浏览器，克隆原元素替换掉它也能达到重置效果：

const fileInput = document.getElementById('fileInput');
const freshInput = fileInput.cloneNode(true);
fileInput.parentNode.replaceChild(freshInput, fileInput);

不过现在主流浏览器都支持value=''的方法，优先用前者更简洁。

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