在前端开发中，我们经常会需要上传文件。然而，浏览器原生的文件选择器样式往往不太美观，我们需要一些工具来美化它们。其中一种方法是使用 npm 包，这里介绍一款叫做 style-file-input 的包。
安装
在使用 style-file-input 之前，我们需要先安装它。可以在终端中输入以下命令进行安装：
npm install style-file-input
或者，你也可以在你的项目目录下的 package.json 中添加如下代码：
"dependencies": {
"style-file-input": "^1.0.0"
}然后在终端中运行以下命令：
npm install
使用
在安装了 style-file-input 后，我们可以在项目中使用它。
引入 style-file-input
首先，在项目中引入 style-file-input：
import StyleFileInput from 'style-file-input'; import 'style-file-input/dist/styles.css';
添加 HTML
在你的 HTML 中添加代码：
<div class="file-input">
<div class="file-input__label"></div>
<button type="button" class="file-input__btn">Upload file</button>
<input type="file" class="file-input__input" name="file" />
</div>初始化 style-file-input
最后，使用以下代码初始化 style-file-input：
let fileInput = new StyleFileInput({
inputSelector: '.file-input__input',
labelSelector: '.file-input__label',
btnSelector: '.file-input__btn',
});
fileInput.init();示例代码
完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------- ------------
----- ---------------- ----------------------------------------------------------------
-------
------
---- -------------------
---- --------------------------------
------- ------------- ------------------------------ -------------
------ ----------- ------------------------- ----------- --
------
------- --------------------------------------------------------
--------
--- --------- - --- ----------------
-------------- ---------------------
-------------- ---------------------
------------ -------------------
---
-----------------
---------
-------
-------探究更多
在使用 style-file-input 后，我们可以自定义样式来适应我们的项目。下面是 style-file-input 的文档链接：
https://www.npmjs.com/package/style-file-input
它的 Github 仓库的链接如下：
https://github.com/YaranLee/style-file-input
这里你可以找到更多关于样式，API 或报告问题的信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a881e8991b448d5f89