我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
我想清除我的表单中的文件输入。
我知道如何用同样的方法设置资源……但该方法不会擦除所选文件路径。
注意:我希望避免重新加载页面、重置表单或执行AJAX调用。
这可能吗?
当前回答
不幸的是,上面的答案似乎没有一个涵盖所有的基础——至少在我用普通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"));
其他回答
有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);
}
}
}
上述答案提供了一些笨拙的解决方案,原因如下:
我不喜欢必须先包装输入,然后得到html,这是非常复杂和肮脏的。 跨浏览器JS很方便,似乎在这种情况下,有太多的未知可靠地使用类型切换(这,再次,有点脏)和设置值为“
因此,我为您提供了基于jQuery的解决方案:
$('#myinput').replaceWith($('#myinput').clone())
它说什么就做什么,它用自己的克隆来替换输入。克隆文件不会被选中。
优点:
简单易懂的代码 没有笨拙的包装或类型切换 跨浏览器兼容性(如果我说错了请指正)
结果: 快乐的程序员
我一直在寻找简单而干净的方法来清除HTML文件输入,上面的答案是伟大的,但没有一个真正回答我在寻找什么,直到我在网络上遇到了一个简单而优雅的方法来做到这一点:
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));
这一切都要归功于克里斯·科伊尔。
// Referneces var control = $("#control"), clearBn = $("#clear"); // Setup the clear functionality clearBn.on("click", function(){ control.replaceWith( control.val('').clone( true ) ); }); // Some bound handlers to preserve when cloning control.on({ change: function(){ console.log( "Changed" ) }, focus: function(){ console.log( "Focus" ) } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" id="control"> <br><br> <a href="#" id="clear">Clear</a>
试试这个简单的方法,它会奏效的
let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;
这将重置输入
tl;dr:对于现代浏览器,使用即可
输入。Value = "或输入。Value = null;
旧的回答:
如何:
input.type = "text";
input.type = "file";
我仍然要理解为什么这不能与webkit工作。
无论如何,这适用于IE9>, Firefox和Opera。 webkit的情况是,我似乎无法将其更改回文件。 在IE8中,情况是它抛出一个安全异常。
编辑: 对于webkit, Opera和firefox,这是有效的:
input.value = '';
(用这个建议核对上面的答案)
我将看看是否能找到一种更好、更干净的方法来跨浏览器执行此操作,而不需要GC。
Edit2:
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}
适用于大多数浏览器。不工作与IE < 9,这是全部。 在firefox 20, chrome 24, opera 12, IE7, IE8, IE9和IE10上测试。