我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
当前回答
在我的世界里,一个简单干净的解决方案是,将文件输入文件设置为一个清晰的FileList。
编辑:正如SteJ所说,这不是与Safari合作。
由于我们不能直接创建FileList - I用户DataTransfer作为“hack”
@$input[0].files=new DataTransfer().files
or
file_input_node.files=new DataTransfer().files
其他回答
不幸的是,上面的答案似乎没有一个涵盖所有的基础——至少在我用普通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"));
document.getElementById('your_input_id').value=''
编辑: 这个选项不能在IE和opera中运行,但似乎可以在firefox、safari和chrome中运行。
你需要用新的文件输入替换它。 下面是如何用jQuery完成的:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');
当你需要清除输入字段时使用这一行(例如在某些事件上):
inputFile.parent().html( inputFile.parent().html() );
试试这个简单的方法,它会奏效的
let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;
这将重置输入
在我的世界里,一个简单干净的解决方案是,将文件输入文件设置为一个清晰的FileList。
编辑:正如SteJ所说,这不是与Safari合作。
由于我们不能直接创建FileList - I用户DataTransfer作为“hack”
@$input[0].files=new DataTransfer().files
or
file_input_node.files=new DataTransfer().files