input file的ui定制

input file的ui定制

由于表单的file类型的外观无法通过css改变样式，加上在不同浏览器ui表现又有所不同，使得很多项目中非常需要可以自定义文件上传UI的方法。在这里，我提供两种在项目中常用的解决办法。

1.模拟点击实现UI定制

这种方法相对简单，原理是直接隐藏原有的file表单，直接在定制好UI的按钮上绑定单击事件，而单击事件中通过模拟点击file表单来触发文件选择。缺点：做法虽然比较简单，但是这种方法也有其局限性，假如你的项目的脚步是按需加载，或者存在跨

域等问题限制，模拟点击就会遇到更多的麻烦。

代码模拟

<button id="upload">upload</button>
<input type="file" id="fileInput" style="display:none" />
<script type="text/javascript">
    $("#upload").click(function(){
        $("#fileInput").click();
    })
</script>

2.通过设置透明度隐藏file表单

将file表单设置透明度为0，通过绝对定位放置在自定义UI的按钮上，这样我们看到的是自定义UI的按钮，实际点击的则是file表单。缺点：我还是比较赞同此种实现方法，很少有模拟点击出现的一些奇奇怪怪的问题，唯一遗憾的是，鼠标移动上去的指针无法变更。

代码模拟

<style type="text/css">
        #fileWrap{ width: 80px; height: 20px; overflow: hidden; position: relative;}
        #fileWrap .fileHide{ position: absolute; left: 0;top:0; width: 80px; height: 20px; z-index: 2;  opacity: 0;cursor: pointer;}
        #fileWrap .fileShow{ position: absolute; left: 0;top:0; width: 80px; height: 20px; z-index: 1;}
    </style>
<div id="fileWrap">
    <div class="fileHide"><input type="file" /></div>
    <div class="fileShow">文件上传</div>
</div>