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

来源：互联网发布：淘宝人气宝收藏有用吗编辑：程序博客网时间：2024/06/06 02:10

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>

阅读全文

0 0