javascript - how to unselect files in html forms?

Question

I have a simple php file upload form, something like this:

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

and I would like to add a function the Remove File button in order to unselect the selected file. Is that possible ?

Thanks for the help.

Answer 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 以获取另一个按钮）