清空input[type='file']的文本域

最新推荐文章于 2024-06-21 11:14:10 发布

原创最新推荐文章于 2024-06-21 11:14:10 发布 · 5.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#表单

前端开发日记专栏收录该内容

29 篇文章

订阅专栏

本文介绍两种有效清除HTML中file控件选中文件的方法：一种是通过移除原有控件并重新插入新的控件；另一种是利用form表单的reset方法，并结合临时表单实现仅清除文件而不影响其他输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

file是没有value的概念的，所以不能直接清除file的文本域。现在提供两种方法来解决这个问题。
一、先移除，在插入。
就是先移除原有的demo里的file控件，然后在插入一个新的file控件。
二、利用form的reset方法。
form的reset方法可以将已上传的文件删除，但是其他输入也会被清空。
我们可以构建一个临时的form表单，将file控件放在这个临时的form表单里。
然后在重置这个表单，最后再将file控件放在原有的表单里并且移除临时的form表单就可以了。

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>file-text</title>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</style>
</head>

<body>
<form class="myForm">
  <input type="file" name="myFile" id="myFile">
</form>
  <input type="button" name="myButton" value="删除">
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
  $('input[name="myButton"]').click(function(){
     //第一种
     $("#myfile").remove();
     $('.myForm').append("<input type='file' name='myFile' id='myFile'>");
     //第二种
     //clearFileInput($('#myFile'));
  });
  function clearFileInput($file){
    var $form=$('<form></form>');//创建临时表单，返回的是jq对象
    $('body').append($form);
    var $fileNext = $file.next();//记录file在原表单中的下一个兄弟节点
    if($fileNext.length==0)
      var $fileParent = $file.parent();//如果file在原表单中是最后一个节点，则记录其父节点
    $form.append($file);//相当于将原表单中的file剪切到信表单中
    $form[0].reset();//这时file的文本域就清空了
    if($fileNext.length>0){
      $file.insertBefore($fileNext);//在$fileNext前插入$file,也相当于是剪切
    }
    else{
      $fileParent.append($file);
    }
    $form.remove();
  }
  </script>
</body>
</html>