关于input file 改样式的操作方式

  最近项目要做那个什么，文件上传和图片上传，只能用 input file 了，这个input file 有点丑，需要改样式。

  我是这么做的：

<div class="btn">
<input type="button" name="upload" id="upload" value="上傳" />
<input type="text" name="filename" id="filename" value="" />
<input type="file" class="input-file" id="a" style="display: none;"/>
</div>
<div>
</div>
<script type="text/javascript">
document.getElementById("upload").onclick=function(){
document.getElementById("a").click();
}

document.getElementById("a").onchange=function(){
var value = this.value;

document.getElementById("filename").value=value;

}
</script>

 

首先把input file display none 隐藏起来，然后呢我再把按钮点击后触发Input file的点击。

恩 然后用一个 input text 来放 input file 的value  Ok 就是这个样子，简单点 需要的样式简单点，做个前端很心累，样式改变很复杂。

好了 至于在线实时预览和 上传压缩 这个稍后再讲。