浏览器自带的文件上传样式极其丑陋,我们对它几乎不能做什么修改,这里使用让其透明的一种方式覆盖在我们样式之上,实现用户点击个性化样式即点击了input标签。

html部分

html部分在body里装上简单的<input type="file">,和我们要用的样式的div,大概长这样:

<div id="upload">
    <form action="" enctype='multipart/form-data'>
        <input type="file" id="file" name="file">
    </form>
    <div id="button">文件上传</div>
</div>

enctype一定要设置,当然这里没有服务器端,如果有的话只有enctype设置如上才能正常工作。

css部分

css部分 重点是设置<input type="file">的定位和透明,还有我们个性化上传文件的按钮样式,有一点不要遗漏,那就是父元素要设置overflowhidden,大概长这样:

#button{
    width: 80px;
    height: 40px;
    border: 3px solid rgb(191,92,220);
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    font-family: "microsoft yahei";
    transition: all 0.2s linear;
}
#file{
    position: absolute;
    left: -70px;
    top: -20px;
    width: 156px;
    height: 66px;
    opacity: 0;
}
#file,input:hover{
    cursor: pointer;
}
#upload{
    position: relative;
    overflow: hidden;
}

定位让<input type="file">的部分内容移出父元素,使用css3动画结合js实现hover样式的变化,通过opacity为0,使<input type="file">覆盖在我们的按钮样式之上,用户点击按钮实则点击了<input type="file">

js

js主要是为了实现鼠标悬浮时,按钮样式的变化,因为<input type="file">的覆盖,无法实现csshover的能力,只能通过js配合来实现样式鼠标悬浮,移入移出的效果变化,大概长这样:

1
2
3
4
5
6
7
8
9
10
11
var file = document.getElementById("file")
var button = document.getElementById("button")
var img = document.getElementById("img")
file.onmouseover = function(){
button.style.color = "#FFF"
button.style.backgroundColor = "rgb(192,92,220)"
}
file.onmouseout = function(){
button.style.color = "black"
button.style.backgroundColor = "white"
}

小结

这种方式有一定的弊端,就是<input type="file">覆盖之后,我们按钮样式的hover不能使用,这hen不爽,其实还有一种是设置一个<a>标签,点击之后js生成<input type="file">然后触发点击事件,同样可以达到改变其丑陋面貌的目的。