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

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

最终效果如下图：

一、html部分代码：

<div>
      <input type="file" class="upload-btn">
      <span type="text" class="file-input-trigger">选择文件</span>
      <p class="file-name"></p>
</div>

以上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元素。

<!-- 先引入jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
<script>
$(function() {
	// 点击自定义的span标签触发input标签的点击事件
    $('.file-input-trigger').on('click', function() {
        $('.upload-btn').trigger('click')
    })
    // 文件改变时 将文件名称显示到p元素中
    $('.upload-btn').on('change', function(event) {
        var fileName = '已选文件：' + event.target.files[0].name
        $('.file-name').text(fileName)
    })
})
</script>

最终上传效果如下：

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