一般情况下默认的文件上传样式,呃..个人认为稍微有点在审美之外。
<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="浏览" οnclick="upfile.click()" style="border:1px solid #ccc;background:#fff">
<input type="file" id="upfile" name="upfile" style="display:none" οnchange="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" οnchange="ufile.value=this.value" style="position: absolute; opacity: 0; right: -144px;">
默认文件上传未隐藏时是这样
隐藏了是这样
之前一直在后台获取不到file文件名,找了好久才发现是因为没有加name属性