前端css+js实现自定义上传文件/图片按钮，并显示已选文件/图片名称

默认的文件上传按钮样式（如下图）确实不太好看，想展现得美观一些就自己写一个样式吧。
下面我们做一个自定义的上传按钮效果，上传后把已上传文件/图片名称也显示出来。
实现思路也很简单：
1、先把原元素隐藏起来，自己写一个好看的按钮
2、点击自定义按钮时触发原元素点击事件达到选择文件上传的效果（等同于触发了原input元素 ）

最终效果如下图：

一、html部分代码：

      
      选择文件
      

以上html代码片段中input就是默认的上传按钮，span是我们自定义的按钮，p用于显示上传后的文件名称。

2、然后通过css样式把原input标签隐藏起来，再根据个人喜欢加上一些样式美化一下自定义的按钮，css样式如下：

/*隐藏原input*/
.upload-btn {
	display: none;
}
/*美化自定义按钮*/
.file-input-trigger {
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #3888C7;
    background-color: #3888C7;
    outline: none;
    color: #fff;
    cursor: pointer;
}

3、js部分的代码：点击span元素 触发input元素的点击事件，并将已选文件名称显示到p元素。

最终上传效果如下：

简单的自定义上传文件按钮就实现啦✌️。