如何取消选择html表单中的文件?

时间:2013-11-18 20:55:58

标签: javascript forms file upload unselect

我有一个简单的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>

我想添加一个函数Remove File按钮以取消选择所选文件。这可能吗?

感谢您的帮助。

1 个答案:

答案 0 :(得分:12)

你必须添加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)