我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
当前回答
有3种方法用javascript清除文件输入:
将value property设置为空或空。 适用于IE11+和其他现代浏览器。 创建一个新的文件输入元素并替换旧的输入元素。 缺点是您将失去事件侦听器和expando属性。 通过form. Reset()方法重置所有者表单。 为了避免影响同一所有者表单中的其他输入元素,我们可以创建一个新的空表单,并将文件输入元素附加到这个新表单并重置它。这种方法适用于所有浏览器。
我写了一个javascript函数。演示:http://jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){ }
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}
其他回答
document.getElementById('your_input_id').value=''
编辑: 这个选项不能在IE和opera中运行,但似乎可以在firefox、safari和chrome中运行。
输入。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);
你需要用新的文件输入替换它。 下面是如何用jQuery完成的:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');
当你需要清除输入字段时使用这一行(例如在某些事件上):
inputFile.parent().html( inputFile.parent().html() );
这对我很管用。
const clear = (event) =>{event.target.value = [ ];}
clear("input_id");
这是我的两分钱,输入文件存储为数组,这里是如何将其为空
document.getElementById('selector').value = []
返回一个空数组,适用于所有浏览器