HTML + JS：单击按钮时清除文件输入

Question

我想告诉我的后端，我删除了它已经加载的指定文件：

<input id="pic" name="pic" type="file" onclick="this.value=null;" onchange="uploadFile(this);">
<button id="pic-delete" type="button" onclick="removeFile(this);"><i someicon></i></button>

onclick 函数如下所示：

removeFile = function() {
    var ipt = document.getElementById("pic");
    ipt.value = null; // <--- problem here
    console.log("worked...")
}

我现在的问题是：无论我什么都不做还是点击删除按钮，我可以在浏览器网络选项卡中区分请求。两次输入字段都没有显示。我想添加 ipt.value="DELETE" 以便我可以在后端捕获它，但这会导致错误：

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

据我所知，如果我在这一行中输入除 ipt.value = null 或 ipt.value = "" 之外的任何其他内容，总是会出现错误。

A fiddle 带有显示错误的完整代码：https://jsfiddle.net/rvc8sbjy/3/

Answer 1

有一些错误。您尝试提取 ID 的方式是错误的。一种更简单的方法是只使用 .replace

      var inputFieldID = v.id.replace("-delete", "");

其次 - 您不能将值设置为非空字符串。要重置它，只需将它设置为一个空的：

          ipt.value = "";

工作示例：

https://jsfiddle.net/5yqohjzv/

HTML + JS：单击按钮时清除文件输入

HTML + JS: Clear File Input on button click

html

javascript

forms

html-input