HTML上传文件样式type="file"

一般情况下默认的文件上传样式，呃..个人认为稍微有点在审美之外。

<input type="file" id="upfile" name="upfile">

只有点击的时候才会出现蓝色的边框，实际上它是摆在正中间的，正是因为没显示边框所以显得有点偏左，这里就用两种方式修改其样式。

第一种：做一个假的上传文件，用按钮+文本+本来的默认文件上传组合，隐藏掉本来的文件上传类型

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

<input type="button" value="浏览" onclick="upfile.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="upfile" name="upfile" style="display:none" onchange="ufile.value=this.value">

默认文件上传没有隐藏时是这样：



隐藏了是这样：



第二种：用文本+无点击效果的按钮+默认上传文件组合，这个按钮只是一个摆设，用来显示这里有一个按钮，其实际没有效果，再将默认的文件上传按钮移动到假的按钮的地方，隐藏掉其默认文件上传。

<input type="text" size="20" name="ufile" id="ufile" style="border:1px dotted #ccc" accept="xlsx">
<input type="button" value="浏览" style="border:1px solid #ccc;background:#fff">
<input type="file" id="upfile" name="upfile" onchange="ufile.value=this.value" style="position: absolute; opacity: 0; right: -144px;">

默认文件上传未隐藏时是这样



隐藏了是这样



之前一直在后台获取不到file文件名，找了好久才发现是因为没有加name属性