jQuery 如何清除文件输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9617738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear File Input
提问by user1181690
Below is part of the jquery code I have which displays the file input and a "Clear File" button.
下面是我的 jquery 代码的一部分，它显示了文件输入和“清除文件”按钮。
var $imagefile = $('<input />').attr({
type: 'file',
name: 'imageFile',
class: 'imageFile'
});
$image.append($imagefile);
var $imageclear = $('<input />').attr({
type: 'button',
name: 'imageClear',
class: 'imageClear',
value: 'Clear File'
});
$image.append($imageclear);
Now the reason I have the "Clear File" button is because if you click on the button, then it will clear anything that is in the file input. How do I code it so that it actually clears the file input when I click on the "Clear File" button?
现在我有“清除文件”按钮的原因是因为如果您单击该按钮，它将清除文件输入中的任何内容。当我单击“清除文件”按钮时，如何对其进行编码，以便实际清除文件输入？
回答by Guillaume Poussel
This should work:
这应该有效：
$imageClear.on('click', function() {
$imageFile.val('');
});
回答by Arvin Jayanake
Clear file input with jQuery
使用 jQuery 清除文件输入
$("#fileInputId").val(null);
Clear file input with JavaScript
使用 JavaScript 清除文件输入
document.getElementById("fileInputId").value = null;
回答by meditari
This is the method I like to use as well but I believe you need to add the bool true parameter to the clone method in order for any events to remain attached with the new object and you need to clear the contents.
这也是我喜欢使用的方法，但我相信您需要将 bool true 参数添加到 clone 方法，以便任何事件与新对象保持连接，并且您需要清除内容。
var input = $("#fileInput");
function clearInput() {
input = input.val('').clone(true);
};
回答by Pranav Kulshrestha
By Setting $("ID").val(null), worked for me
通过设置$("ID").val(null)，为我工作
回答by Iceman
Another solution if you want to be certain that this is cross-browser capable is to remove() the tag and then append() or prepend() or in some other way re-add a new instance of the input tag with the same attributes.
如果您想确定这是跨浏览器功能，另一种解决方案是 remove() 标签，然后 append() 或 prepend() 或以其他方式重新添加具有相同属性的输入标签的新实例.
<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
<input type="file" name="fileinput" id="fileinput" />
</label>
</form>
$("#fileinput").remove();
$("<input>")
.attr({
type: 'file',
id: 'fileinput',
name: 'fileinput'
})
.appendTo($("label[for='fileinput']"));
回答by Shani Kehati
for React users
对于 React 用户
e.target.value = ""
But if the file input element is triggered by a different element (with a htmlForattribute) - that will mean u don't have the event
但是，如果文件输入元素是由不同的元素（具有htmlFor属性）触发的- 那将意味着您没有该事件
So you could use a ref:
所以你可以使用参考：
at beginning of func:
在 func 的开头：
const inputRef = React.useRef();
on input element
在输入元素上
<input type="file" ref={inputRef} />
and then on an onClick function (for example) u may write
然后在 onClick 函数上（例如）你可以写
inputRef.current.value = ""
- in React Classes - same idea, but difference in constructor:
this.inputRef = React.createRef()
- 在 React 类中 - 相同的想法，但构造函数不同：
this.inputRef = React.createRef()
回答by Piotr Sagalara
In my case other solutions did not work than this way:
在我的情况下，其他解决方案比这种方式不起作用：
$('.bootstrap-filestyle :input').val('');
However, if you will have more than 1 file input on page, it will reset the text on all of them.
但是，如果页面上有 1 个以上的文件输入，它将重置所有文件上的文本。
回答by Nagnath Mungade
get input id and put val is empty like below: Note : Dont put space between val empty double quotes val(" ").
get input id and put val is empty like below: 注意：不要在 val 空双引号 val(" ") 之间放置空格。
$('#imageFileId').val("")
回答by reza laki
this code works for all browsers and all inputs.
此代码适用于所有浏览器和所有输入。
$('#your_target_input').attr('value', '');
回答by Charnichart
This works to
这适用于
$("#yourINPUTfile").val("");
