如何将jQuery实现的文件输入框重置逻辑转为纯JavaScript？

原jQuery代码的核心逻辑是通过临时包裹<form>并调用其reset()方法重置文件输入框，再移除包裹的表单。以下是完全不依赖jQuery的纯JavaScript实现：

核心函数实现 #

function resetInputFile(elem) {
  // 校验元素有效性
  if (!elem || elem.tagName !== 'INPUT' || elem.type !== 'file') return;

  // 创建临时form元素
  const tempForm = document.createElement('form');
  // 将文件输入框移动到临时form中（模拟jQuery的wrap行为）
  elem.parentNode.insertBefore(tempForm, elem);
  tempForm.appendChild(elem);
  // 调用form的reset方法重置输入框
  tempForm.reset();
  // 将输入框移回原位置，移除临时form（模拟jQuery的unwrap行为）
  tempForm.parentNode.insertBefore(elem, tempForm);
  tempForm.remove();
}

调用方式（修正原代码拼写错误） #

// 正确的选择器方法是querySelector，不是queryElement
resetInputFile(document.querySelector('#image'));

React中使用示例 #

在React组件里，可结合useRef获取文件输入框的DOM引用，再调用重置函数：

import { useRef } from 'react';

export default function FileUploadComponent() {
  const fileInputRef = useRef(null);

  const resetInputFile = (elem) => {
    if (!elem || elem.tagName !== 'INPUT' || elem.type !== 'file') return;
    
    const tempForm = document.createElement('form');
    elem.parentNode.insertBefore(tempForm, elem);
    tempForm.appendChild(elem);
    tempForm.reset();
    tempForm.parentNode.insertBefore(elem, tempForm);
    tempForm.remove();
  };

  const handleResetClick = () => {
    resetInputFile(fileInputRef.current);
  };

  return (
    <div>
      <input type="file" ref={fileInputRef} id="image" />
      <button onClick={handleResetClick}>重置选择</button>
    </div>
  );
}

逻辑说明 #

• 文件输入框的value属性为只读，无法直接通过elem.value = ''修改（存在兼容性问题），利用<form>的reset()方法是跨浏览器可靠的重置方式。
• 临时创建的表单仅用于触发重置操作，完成后立即移除，不会影响页面原有DOM结构。

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