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

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

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

这可能吗?


当前回答

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

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

其他回答

上述答案提供了一些笨拙的解决方案,原因如下:

我不喜欢必须先包装输入,然后得到html,这是非常复杂和肮脏的。 跨浏览器JS很方便,似乎在这种情况下,有太多的未知可靠地使用类型切换(这,再次,有点脏)和设置值为“

因此,我为您提供了基于jQuery的解决方案:

$('#myinput').replaceWith($('#myinput').clone())

它说什么就做什么,它用自己的克隆来替换输入。克隆文件不会被选中。

优点:

简单易懂的代码 没有笨拙的包装或类型切换 跨浏览器兼容性(如果我说错了请指正)

结果: 快乐的程序员

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

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

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

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

这其实很简单。

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"));

我改变了类型文本和返回类型文件使用setAttribute

'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'

'var input=document.querySelector('#filepicture');'

if(input != null)
{
    input.setAttribute("type", "text");
    input.setAttribute("type", "file");
}