我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行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())
它说什么就做什么,它用自己的克隆来替换输入。克隆文件不会被选中。
优点:
简单易懂的代码 没有笨拙的包装或类型切换 跨浏览器兼容性(如果我说错了请指正)
结果: 快乐的程序员
这其实很简单。
document.querySelector('#input-field').value = '';
我尝试了大多数的解决方案,但似乎没有人工作。然而,我在下面找到了一个散步的地方。
表单的结构是:form =>标签,输入和提交按钮。在我们选择了一个文件之后,该文件名将通过在JavaScript中手动执行的操作由标签显示。
所以我的策略是:最初提交按钮是禁用的,在文件被选中后,提交按钮禁用属性将被移除,这样我就可以提交文件了。提交后,我清除了标签,这使它看起来像是我清除了文件输入,但实际上不是。然后我将再次禁用提交按钮,以防止提交表单。
通过将提交按钮设置为禁用或不禁用,我可以多次停止提交文件,除非我选择另一个文件。
试试这个简单的方法,它会奏效的
let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;
这将重置输入
将该值设置为“并不适用于所有浏览器。
相反,尝试将值设置为null,如下所示:
document.getElementById('your_input_id').value= null;
编辑: 我得到了不允许JS设置文件输入的非常有效的安全原因,但是提供一个简单的机制来清除已经选择的输出似乎是合理的。我尝试使用空字符串,但它在所有浏览器中都不起作用,NULL在我尝试过的所有浏览器中都起作用(Opera, Chrome, FF, IE11+和Safari)。
编辑: 请注意,设置为NULL在所有浏览器上都有效,而设置为空字符串则不行。