介绍
在前端开发中，文件上传是一个比较重要的功能。许多开发者使用第三方插件来实现此功能，但是我们也可以自己开发一个文件上传组件。这篇文章将介绍使用 Custom Elements 实现文件上传组件的方法。 Custom Elements 是一个新的 web 标准，允许您创建自定义的 HTML 元素。
步骤
- 首先，我们需要创建一个自定义元素。在这个例子中，我们的元素将被称为
file-upload。
-- -------------------- ---- -------
--------- --------------------------
-----
------ ----------- ----------------
------- ----------------------------------
------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- -------- - ------------------------------------------------
----- -------- - ---------------------------------
-----------------------------
-
-
------------------------------------ ------------
---------上面的代码中，我们创建了自定义元素 file-upload。我们用一个 template 元素放置我们的表单组件，并用 JS 动态添加了当中的元素。
- 我们现在需要在我们的
input元素上传文件，并在button元素上添加一个点击事件，以触发文件上传逻辑。
-- -------------------- ---- -------
--------- --------------------------
-----
------ ----------- ----------------
------- ----------------------------------
------
-----------
--------
----- ---------- ------- ----------- -
------------- -
--------
----- ------ - ------------------------ ---------
----- -------- - ------------------------------------------------
----- -------- - ---------------------------------
-----------------------------
----- --------- - ------------------------------------
----- ------------ - ---------------------------------------
-------------------------------------- -- -- -
----- ---- - -------------------
-- ----------------
---
-
-
------------------------------------ ------------
---------现在，我们已经能够选择文件并触发上传逻辑。真正的上传逻辑，取决于您的后端 API 是如何构建的。
总结
Custom Elements 是一个很方便的功能，可以帮助我们构建一个自己想要的 HTML 元素，并方便地在需要的时候使用。在这个例子中，我们看到了如何使用 Custom Elements 来构建一个简单的文件上传组件。使用这个方法，我们可以不用依赖第三方插件，并且可以完全掌控文件上传的逻辑。
示例代码
您可以在 JSFiddle 中查看完整示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6547b5397d4982a6eb20db94