清除 Internet Explorer 中的文件输入框答案

【问题标题】：Clearing file input box in Internet Explorer清除 Internet Explorer 中的文件输入框
【发布时间】：2023-03-03 23:15:02
【问题描述】：

我的页面上有一个文件上传框和一个清除按钮。当我按下清除按钮时，我希望文件上传框中的文本被清除。

以下内容在 Firefox 中有效，但在 IE 中无效（文本保留在那里）。有解决办法吗？

$("#clear").click( function() {
    $("#attachment").val("");
    //document.myform.attachment.value = "";
})

HTML：

<form name="myform">
    <input type="file" name="attachment" id="attachment" />
</form>
<br /><button id="clear">Clear Attachment</button>

jsFiddle

【问题讨论】：

Clearing <input type='file' /> using jQuery的可能重复

标签： javascript jquery html internet-explorer file-upload

【解决方案1】：

我发现的一个解决方案就是这样做：

document.getElementById('myUploadField').parentNode.innerHTML = document.getElementById('myUploadField').parentNode.innerHTML;

似乎它不应该工作，但它确实。

【讨论】：

太棒了。谢谢一堆。

【解决方案2】：

这个解决方案比克隆输入元素更优雅。您将<form> 包裹在元素周围，在表单上调用reset，然后使用unwrap() 删除表单。与上面的 clone() 解决方案不同，您最终会得到相同的元素（包括在其上设置的自定义属性）。

在 Opera、Firefox、Safari、Chrome 和 IE6+ 中测试和工作。也适用于其他类型的表单元素，除了 type="hidden"。

http://jsfiddle.net/rPaZQ/

function reset(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

【讨论】：

如果您不想完全重置，非常有用。
这很棒。谢谢。
像魅力一样工作..谢谢。 :)
不是万无一失的解决方案。值可能会从 UI 上的输入字段中清除，但仍然可以从 $("#myFileUpload").val() 访问

【解决方案3】：

它在IE8 onwards 中是只读的，所以你不能清除它。绕过此安全功能的最简单方法是将元素替换为副本。

编辑找到了一个先前的答案，建议使用相同的方法！ Clearing <input type='file' /> using jQuery

【讨论】：

【解决方案4】：

这对我有用：

 $("input[type='file']").replaceWith($("input[type='file']").clone(true));

【讨论】：

【解决方案5】：

使用简单的javascript：

formname.reset();

查看演示：http://jsfiddle.net/rathoreahsan/YEeGR/

【讨论】：

表单上有多个字段时有点问题。

【解决方案6】：

尝试使用以下方法清除输入文件。

包括这个脚本：

 <script>
 function clearFileInputField(tagId) {
 document.getElementById(tagId).innerHTML =
    document.getElementById(tagId).innerHTML;
}
</script>

把 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>`

【讨论】：

【解决方案7】：

使用老式的<input type="reset" value="clear this">

【讨论】：

那不会重置整个表单吗？我想避免这种情况。
你给出的例子只有一个元素，所以我认为这很好。
抱歉给您带来了困惑。我想理论上我可以保存其他表单元素的值并在之后重新加载它们。 :P
@tskuzzy：如果表单中有多个文件字段，则以后无法重新加载它们。