【问题标题】:how to unselect files in html forms?如何取消选择html表单中的文件?
【发布时间】:2013-12-02 04:32:14
【问题描述】:

我有一个简单的 php 文件上传表单,如下所示:

<form action="upload_file.php" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
<label for="file">Files:</label>
<input type="file" name="file[]" id="file"><button type="button">Remove File</button>
<input type="file" name="file[]" id="file"><button type="button">Remove File</button>
<input type="submit" name="submit" value="Submit">
</form>

我想添加一个删除文件按钮的功能,以取消选择选定的文件。这可能吗?

感谢您的帮助。

【问题讨论】:

  • 在我发布答案之前,您是要取消选择两个输入,还是一次取消选择一个?

标签: javascript forms file upload unselect


【解决方案1】:

您必须添加 ID 以使其更容易,否则您将遍历节点并且您不会喜欢这样。

<form action="upload_file.php" method="post" onsubmit="return validateForm()" enctype="multipart/form-data">
    <label for="file">Files:</label>
    <input id="file1" type="file" name="file[]" />
    <button id="rmv1" type="button">Remove File</button>

    <input id="file2" type="file" name="file[]" />
    <button id="rmv2" type="button">Remove File</button>

    <input type="submit" name="submit" value="Submit">
</form>

然后添加javascript恢复默认值:

document.getElementById('rmv1').onclick = function() { 
    var file = document.getElementById("file1");
    file.value = file.defaultValue;
}

(将 rmv1 更改为 rmv2 并将 file1 更改为 file2 用于另一个按钮)

【讨论】:

  • 我不想重置所有输入。我只是想重置我想要的那些,这就是为什么我为每个输入设置一个按钮。
  • 非常好,但是如何更改您的 JavaScript 代码以使其自动运行?假设我的真实表单是动态的,也许我只有一个文件输入,或者我有 20 个。那么你知道如何更改 javascript 吗?
  • 您必须使用 addEventListener() 绑定函数才能将函数绑定到动态元素
  • 我知道,很抱歉再次询问,但是,如何将其绑定到动态元素?
猜你喜欢
  • 1970-01-01
  • 2021-09-06
  • 1970-01-01
  • 2014-07-17
  • 1970-01-01
  • 1970-01-01
  • 2012-07-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多