清除一个<input type=file>

Question

我正在写一个HTA，希望用户能够很容易地使用浏览器选择一个.txt文件。这个.txt文件将被逐行读取并读入一个数组。所以，我在使用 <input type=file name="ListFile">它给我提供了浏览功能，并做了我需要的事情......

但我需要能够清除文本框中的 <input type=file name="ListFile"> 当用户选择另一种方法时，我设置了输入数据。

我需要清除它的原因是为了防止用户的错误。我目前的设置是当用户使用浏览选项时，清除手动输入文本框，但不能让它反过来工作。

我已经尝试了以下方法（在常规文本框上有效）。

Document.getElementByID("ListFile").value = ""
Document.getElementByID("ListFile").reset()
Docuemnt.getElementByID("ListFile").innerHTMl = ""
ListFile.Value = ""

这些都不能清除文本框。

Answer 1

出于安全考虑，你无法修改文件输入字段中的选定文件。

有一个变通的方法来重置它--你可以克隆文件输入，然后用克隆的输入替换输入。 在你的情况下，可能更容易根据用户的选择来显示隐藏输入。

例如，你可以有一组单选按钮让用户选择输入法--然后根据他们选择的单选按钮显示相应的字段。

如果你一定要重置文件输入，你可以使用jQuery的 .clone() 方法，或者手动创建一个新的 dom 元素，复制所有属性，在原文件输入后插入，然后删除原文件。

Answer 2

谢谢Sam Dufel......你给了我一个主意。

创建了一个 span，创建了 on Window_onLoad

Span Code:

Window_onLoad 代码: 浏览文件.innerHTML = " "

然后，我把这个复制到另一个Sub，当他们选择手动数据输入选项时运行。基本上是清除跨度，重新创建输入。

Answer 3

你不能改变文件输入类型的值，因为那会引入一个安全漏洞。相反，只需用一个新的文件输入替换。取而代之的是 $('#file').val('')，做到这一点。

 $('#file').replaceWith('<input name="ListFile" type="file" id="file"/>');

更好的办法是克隆一个原始版本的副本 并将其存储在内存中。当你需要替换的时候，就用克隆的副本，再次克隆。所以，类似这样。

$(document).ready(function() {
    var empty_input = $('#file').clone();

    $('#the-form').on('change', '#file', function(el) {
        $('#the-form').submit(); // assuming the target is a hidden iframe
        $(this).replaceWith(empty_input.clone());
    });
})

请注意，我用的是委托版本，用的是 jQuery.on() 所以事件在更换新的输入后，仍然会马上在新的输入上工作。