怎么简便地去掉html中难看的文件上传按钮并实现图片预览功能？_前端上传文件控件太丑怎么解决-优快云博客

本文介绍了一种使用HTML和CSS美化文件上传按钮的方法，并通过JavaScript实现文件预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

通常的文件上传按钮是这样的：
这里写图片描述
选择了文件过后是这样的：

很显然，这样的按钮并不好看。

解决方法

用一个label标签来装载样式，其for属性指向type=file的input，然后将input标签隐藏（display=“none”），这样，在点击label时就会触发input弹出文件选择框。

实例演示

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
<label for="file"><img src="images/2.jpg"></label>
<input type="file" id="file" name="" style="display: none"/>
<div id="image" style="width:100px;height:100px; background:#CCCCCC; ">
    <img src="images/2.jpg" height="100px" width="100px" border="5px"/>
</div>
</body>
<script>
    document.getElementById('file').onchange = function() {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function() {
            document.getElementById('image').getElementsByTagName('img')[0].src = fr.result;
        };
        fr.readAsDataURL(imgFile);
    };
</script>

</html>

效果：
这里写图片描述