我想清除我的表单中的文件输入。

我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。

注意:我希望避免重新加载页面、重置表单或执行AJAX调用。

这可能吗?


当前回答

这其实很简单。

document.querySelector('#input-field').value = '';

其他回答

不幸的是,上面的答案似乎没有一个涵盖所有的基础——至少在我用普通javascript进行的测试中没有。

.value = null似乎在FireFox, Chome, Opera和IE11(但不是IE8/9/10)上工作 FireFox上的. clonenode(和jQuery中的.clone())似乎复制了.value,因此使克隆毫无意义。

所以这里是我写的香草javascript函数,它可以在FireFox(27和28),Chrome (33), IE (8, 9, 10, 11), Opera(17)…这些是目前可供我测试的唯一浏览器。

function clearFileInput(ctrl) {
  try {
    ctrl.value = null;
  } catch(ex) { }
  if (ctrl.value) {
    ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
  }
}

ctrl参数是文件输入本身,因此该函数将被调用为…

clearFileInput(document.getElementById("myFileInput"));

我尝试了大多数的解决方案,但似乎没有人工作。然而,我在下面找到了一个散步的地方。

表单的结构是:form =>标签,输入和提交按钮。在我们选择了一个文件之后,该文件名将通过在JavaScript中手动执行的操作由标签显示。

所以我的策略是:最初提交按钮是禁用的,在文件被选中后,提交按钮禁用属性将被移除,这样我就可以提交文件了。提交后,我清除了标签,这使它看起来像是我清除了文件输入,但实际上不是。然后我将再次禁用提交按钮,以防止提交表单。

通过将提交按钮设置为禁用或不禁用,我可以多次停止提交文件,除非我选择另一个文件。

document.getElementById('your_input_id').value=''

编辑: 这个选项不能在IE和opera中运行,但似乎可以在firefox、safari和chrome中运行。

这是我的两分钱,输入文件存储为数组,这里是如何将其为空

document.getElementById('selector').value = []

返回一个空数组,适用于所有浏览器

你需要用新的文件输入替换它。 下面是如何用jQuery完成的:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

当你需要清除输入字段时使用这一行(例如在某些事件上):

inputFile.parent().html( inputFile.parent().html() );