在前端开发中，我们经常需要使用 HTML 的文件上传功能。但是有时候用户会不小心选择了错误的文件，或者想要重新选择一个新的文件，而 HTML 的文件上传字段并没有提供清除已选择文件的功能。本文将介绍如何通过 JavaScript 清除 HTML 文件上传字段中已选择的文件。
实现思路
HTML 的文件上传字段通过 <input type="file"> 标签实现。当用户选择了一个文件后，该标签的 value 属性会被设置为所选文件的完整路径。因此，要清除已选择的文件，只需将该属性设置为空字符串即可。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ---- ----- -------------
-------
------
------ ----------- -------------------
------- -----------------------------------------
--------
-------- ---------------- -
---------------------------------------------- - ---
-
---------
-------
-------在上面的示例代码中，我们创建了一个文件上传字段和一个按钮。当用户点击按钮时，会调用 clearFileInput() 函数来清除文件上传字段的值。该函数使用 document.getElementById() 方法获取文件上传字段的 DOM 元素，并将其 value 属性设置为空字符串。
学习与指导意义
本文介绍了如何通过 JavaScript 清除 HTML 文件上传字段中已选择的文件。这对于提高用户体验、增加应用程序的可用性和易用性非常有帮助。通过本文的实例代码，读者可以快速掌握如何实现该功能，并在自己的项目中应用。
除此之外，本文还介绍了 HTML 文件上传字段的基本用法和属性，对于初学者来说也是一个不错的入门教程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/15075