1
打开编辑器，创建一个HTML文档，并且设立基本架构。
2
<form>
<input type=”file”>
</form>
大家引入input标签的时候，会发现浏览器会自动显示文字，这是默认的名字。
3
<input type=”button” value=”上传点这里” onclick=”javascript:$('input[name=\'file\']').click();” />
<input name=”fileName” readonly />
<input type=”file” onchange=”javascript:$('input[name=\'fileName\']').val(this.files[0].name);” />
大家这里实际可以另外创建一个button和file，利用js的功能。
但是这里就多了一个旧的功能了。
4
style=”display: none;”
这个时候大家需要加入这个样式来取消掉旧的显示。
5
当然大家也可以用CSS来指定样式，这里新建一个CSS文档，并与HTML文档相关联。
6
<form class=”main”>
<input class=”file” type=”file”>
<a href=”#”>上传图片</a>
</form>
.main{
overflow:hidden;
position:absolute
}
.file{
position:absolute;
z-index:200;
margin-left:-200px;
opacity:0;
filter:alpha(opacity=0);
margin-top:-50px;
}
这里大家添加一个a链接，然后就可以依靠这个a链接来上次文件，主要要清除掉原来的文字。
7
a {
text-decoration:none;
border: 0.5px solid blue;
}
为了更接近原来的样式，大家可以修改一下a链接的样式。
css 书页，元素混合css，css怎么编辑上传，红色文化网页css，css编程快捷键，css控制前端颜色代码，css3边框粗细