input file上传文件改变默认样式

我们知道，在使用到input file上传文件的时候，会出现这样很丑的默认样式，作为前端开发的我们，主要责任就是去优化这些样式，以更美观的方式呈现出来，但是，这个默认样式没有可以去修改的属性，还是比较麻烦的。

这个时候，就需要用到一些障眼法了，将原来的样式隐藏起来，再重新写一个按钮代替，与原来的位置重合即可。

原本的样式是这样的：

这是改完以后的样式，根据需要来设置属性，这里已经写好了选择文件，导入到表格里面的效果啦。

我们的目标是创造一个简洁，用纯CSS实现的，在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样：

步骤1.创建一个简单的HTML标记

Upload

第2步：CSS：

有点棘手了

.fileUpload

{

position:

relative

overflow:

hidden

margin:

10px

}

.fileUpload

input.upload

{

position:

absolute

top:

0

right:

0

margin:

0

padding:

0

font-size:

20px

cursor:

pointer

opacity:

0

filter:

alpha(opacity=0)

}

为简单起见，我使用应用了BootstrapCSS样式的按钮

(div.file-upload)。

演示：

上传按钮，显示选中的文件

不幸的是纯CSS的做不到这一点。但是，如果你真的想显示所选文件，下面的JavaScript代码片段可以帮助你。

JavaScript：

document.getElementById("uploadBtn").onchange

=

function

()

{

document.getElementById("uploadFile").value

=

this.value

}

DOM:

Upload

直接写CSS样式是不行的

<input type="text" size="20" name="upfile" id="upfile" style="border:1px dotted #ccc">

<input type="button" value="浏览" onclick="path.click()" style="border:1px solid #cccbackground:#fff">

<input type="file" id="path" style="display:none" onchange="upfile.value=this.value">

写成这样，用一个text和一个button替代file，然后让file隐藏

---