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

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

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

这可能吗?


当前回答

我改变了类型文本和返回类型文件使用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");
}

其他回答

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

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

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

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

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

优点:

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

结果: 快乐的程序员

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

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

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

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

解决方案

下面的代码是用jQuery编写的。它适用于所有浏览器,并允许保存事件和自定义属性。

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

有关代码和演示,请参阅jsFiddle。

链接

使用jQuery清除<input type='file' /> 如何用JavaScript重置文件输入

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

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

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

我也有同样的问题,我想出了这个。

var file = document.querySelector('input'); var emptyFile = document.createElement('input'); emptyFile。Type = 'file'; document.querySelector(“按钮”)。Onclick = function(){ 文件。文件= emptyFile.files; } <输入类型=“文件”> < >按钮明确> < /按钮