input file 控件是前端开发中常用的一个元素，它允许用户选择本地计算机上的文件上传到服务器。在某些情况下，我们可能需要实现删除选定文件的功能。
问题分析
当用户选择了文件并提交表单时，可以通过 JavaScript 访问 input file 控件的 files 属性来获取选中的文件列表。然后，我们就可以使用 splice() 方法从数组中删除指定的文件，但这并不会从 input file 控件中完全删除文件。
为什么会这样呢？因为 input file 控件与浏览器提供的安全机制有关。如果允许网页通过 JavaScript 直接修改输入文件，那么这将打开恶意攻击的漏洞。因此，目前没有一种简单的方法可以彻底删除 input file 控件中的已选文件。
解决方案
实现删除选定文件的功能，我们可以考虑以下两种方法：
方法一：重新创建 input file 控件
这种方法的思路是，当用户需要删除某个文件时，我们将原来的 input file 控件删除，再创建一个新的 input file 控件。由于新创建的控件是空的，所以被删除的文件也就不复存在了。
以下是示例代码：
-- -------------------- ---- ------- ------ ----------- ------------ -------- ----- ----- - ---------------------------------- -- --------- -- ------- -------- ------------ - ------------------------------------ ----- -------- - -------------------------------- ------------- - ------- ----------- - --------- -- --------- -- --- --------------------------------------- - ---------
方法二：将已选文件替换为未选状态
这种方法的思路是，重新设置 input file 控件的值。当用户选择一个文件时，可以记住该文件的路径或名称等信息。当需要删除该文件时，我们可以将 input file 控件的值重新设置为空字符串，这会使浏览器认为用户还没有选择过文件。
以下是示例代码：
-- -------------------- ---- -------
------ ----------- ------------
--------
----- ----- - ----------------------------------
--- ------------- - ---
-------------------------------- ---------- -
------------- - ----------------------------- -- --------
---
-- -------
-------- ------------ -
----- ---------------- - --------------------- ----
-- ------------------------------------------ -
-- -------------
------------------------------------------------------------- ---
-- --------------
----------- - ---
-- ------------------
----------- - --- ----------------------------------------- -- ------ --- -------------------
-
-
---------总结
以上两种方法都有其优缺点，我们应根据具体情况选择合适的方案。在实际开发中，我们还需要考虑用户体验和安全性等问题，确保删除选定文件的功能能够正常运行且不影响整个应用程序的稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28757