Javascript 清除 Internet Explorer 中的文件输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6987452/
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
Clearing file input box in Internet Explorer
提问by tskuzzy
I have an file upload box and a clear button on my page. When I press the clear button, I want the text in the file upload box to be cleared.
我的页面上有一个文件上传框和一个清除按钮。当我按下清除按钮时，我希望文件上传框中的文本被清除。
The following works in Firefox, but doesn't in IE (the text stays there). Is there a workaround for this?
以下在 Firefox 中有效，但在 IE 中无效（文本保留在那里）。有解决方法吗？
$("#clear").click( function() {
$("#attachment").val("");
//document.myform.attachment.value = "";
})
HTML:
HTML：
<form name="myform">
<input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>
采纳答案by andyb
It's readonly in IE8 onwards, so you can't clear it. The simplest way around this security feature is to replace the element with a copy.
它在IE8 以后是只读的，所以你不能清除它。绕过此安全功能的最简单方法是用副本替换元素。
EditFound a previous answer to this that suggests the same approach! Clearing <input type='file' /> using jQuery
编辑找到了一个以前的答案，建议采用相同的方法！使用 jQuery 清除 <input type='file' />
回答by Maxx
One solution I've found is simply doing:
我发现的一种解决方案就是这样做：
document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;
Seems like it shouldn't work, but it does.
似乎它不应该工作，但确实如此。
回答by slipheed
This solution is more elegant than cloning the input element. You wrap a <form>around the element, call reset on the form, then remove the form using unwrap(). Unlike the clone() solutions above, you end up with the same element at the end (including custom properties that were set on it).
这个解决方案比克隆输入元素更优雅。您将 a 包裹<form>在元素周围，在表单上调用 reset，然后使用 unwrap() 删除表单。与上面的 clone() 解决方案不同，您最终会得到相同的元素（包括在其上设置的自定义属性）。
Tested and working in Opera, Firefox, Safari, Chrome and IE6+. Also works on other types of form elements, with the exception of type="hidden".
在 Opera、Firefox、Safari、Chrome 和 IE6+ 中测试和工作。也适用于其他类型的表单元素，type="hidden" 除外。
function reset(e) {
e.wrap('<form>').closest('form').get(0).reset();
e.unwrap();
}?
回答by Anand Kumar
This worked for me:
这对我有用：
$("input[type='file']").replaceWith($("input[type='file']").clone(true));回答by Ahsan Rathod
use simple javascript:
使用简单的javascript：
formname.reset();
See the Demo: http://jsfiddle.net/rathoreahsan/YEeGR/
回答by Sudharsan
Try to use the below method to clear the input file.
尝试使用以下方法清除输入文件。
Include this script:
包括这个脚本：
<script>
function clearFileInputField(tagId) {
document.getElementById(tagId).innerHTML =
document.getElementById(tagId).innerHTML;
}
</script>
Change HTML to this:
将 HTML 更改为：
<div id="uploadFile_div">
<input type="file" class="fieldMoz" id="uploadFile" onkeydown="return false;" size="40" name="uploadFile"/>
</div>
<a onclick="clearFileInputField('uploadFile_div')" href="javascript:noAction();">Clear</a>`
回答by Diodeus - James MacFarlane
Use the old-fashioned <input type="reset" value="clear this">
使用老式 <input type="reset" value="clear this">
