我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
当前回答
我也有同样的问题,我想出了这个。
var file = document.querySelector('input'); var emptyFile = document.createElement('input'); emptyFile。Type = 'file'; document.querySelector(“按钮”)。Onclick = function(){ 文件。文件= emptyFile.files; } <输入类型=“文件”> < >按钮明确> < /按钮
其他回答
解决方案
下面的代码是用jQuery编写的。它适用于所有浏览器,并允许保存事件和自定义属性。
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
DEMO
有关代码和演示,请参阅jsFiddle。
链接
使用jQuery清除<input type='file' /> 如何用JavaScript重置文件输入
输入。Value = null是一个工作方法,但是如果从onclick事件调用它,它只会触发输入的change事件。
解决方案是在需要重置输入时手动调用onchange处理程序。
function reset_input(input) {
$(input)[0].value = null;
input_change_handler();
}
function input_change_handler() {
// this happens when there's been a change in file selection
if ($(input)[0].files.length) {
// file(s) selected
} else {
// nothing is selected
}
}
$(input).on('change', input_change_handler);
上述答案提供了一些笨拙的解决方案,原因如下:
我不喜欢必须先包装输入,然后得到html,这是非常复杂和肮脏的。 跨浏览器JS很方便,似乎在这种情况下,有太多的未知可靠地使用类型切换(这,再次,有点脏)和设置值为“
因此,我为您提供了基于jQuery的解决方案:
$('#myinput').replaceWith($('#myinput').clone())
它说什么就做什么,它用自己的克隆来替换输入。克隆文件不会被选中。
优点:
简单易懂的代码 没有笨拙的包装或类型切换 跨浏览器兼容性(如果我说错了请指正)
结果: 快乐的程序员
我也有同样的问题,我想出了这个。
var file = document.querySelector('input'); var emptyFile = document.createElement('input'); emptyFile。Type = 'file'; document.querySelector(“按钮”)。Onclick = function(){ 文件。文件= emptyFile.files; } <输入类型=“文件”> < >按钮明确> < /按钮
document.getElementById('your_input_id').value=''
编辑: 这个选项不能在IE和opera中运行,但似乎可以在firefox、safari和chrome中运行。