input标签file类型样式的改变

 提示:转载请注明原文链接

 本文永久链接:https://360us.net/article/8.html

话说默认的样式超级难看,而这个东西又比较特殊,input其他的类型都可以自定义的,唯独file不能被改变。

起初上网搜索了一下,都说不能改变,无奈。

都是用一个text和一个button的input,然后隐藏掉file,再用js控制。也挺简单,看下面代码:

<script>
function fileup(){
var fileup = document.getElementById("fileupload");
file.click();
}
function change(){
var file = document.getElementById("file"),
fileup = document.getElementById("fileupload");
fileup.value = file.value;
}
</script>
<input type="text" id="fileupload" />
<input type="button" id="button" value="browse" onclick="fileup()" />
<input type="file" id="file" onchange="change()" style="display:none;" />

就是当鼠标点击button时,用js触发file的点击动作,然后激活了file控件,再在file空间内容改变的时候,也就是选择了文件的时候用file的值填充到text里面去。

由于file是隐藏的,你只能看见选择文件的窗口。

这有个问题就是你不能获取得到file控件里面文件的完整路径,只能获取得到文件名,也就是写到text里面的值只有文件名,不含文件路径。一般的file控件选择文件之后是含有文件路径加文件名的,据说这个是浏览器的原因,出于安全性的考虑。

不过有网友还是通过js获取到了file控件内容的完整路径+文件名的值,不过这样子需要写多点代码,而且还有兼容性问题,也不是太好搞,所以没有特殊要求就这样就OK了。

text、和button类型的input外观是可以用css控制的。


 评论
昵称
邮箱
网址
最多500个字符