大家可能都知道在html中的input file文件上传控制默认风格与样式很难看了，下面我找到了几种比较实用的自定义文件上传框样式的方法，大家一起来看看。
例1
一千个浏览器就有一千个默认控件样式
如何自定义文件上传控件 <input type=’file’> 样式？
原理：把浏览器提供的默认控件样式隐藏，给控件外框添加自定义样式。兼容性：兼容所有浏览器。
HTML:
代码如下
复制代码
<label class="input-file">
<input title="浏览文件" type="file" />浏览…
</label>CSS:
.input-file{display: inline-block;width: 140px;height: 50px;line-height: 50px;text-align: center; overflow: hidden;position: relative;background-color: #00a1cb;color: #fafafa;text-shadow:0 -1px 0 rgba(0,0,0,0.25);border-radius: 1px;transition:background .3s;-webkit-transition:background .3s}/*自定义外框样式*/.input-file:hover{background-color: #00b5e5}/*鼠标经过样式*/.input-file input{opacity: 0;filter:alpha(opacity=0);font-size: 100px;position: absolute;top: 0;right: 0} /*隐藏默认控件样式*/
例2
那么接下来，就看代码了。
先是结构
代码如下
复制代码
<input type="text" id="a" readonly="readonly" />
<a href="javascript:void(0);" class="input">
浏览
<input type="file" id="file">
</a>
此处第一个 input 为模仿 文件路径的输入框，使用 javascript 在选择完成之后，把文件路径填到此处。第二个 a 标签模仿控件，第三个 input 是实际起作用的控件，只不过隐藏了而已。
然后是 CSS
代码如下
复制代码
a.input {
width:100px;
height:25px;
line-height:25px;
background:#08f;
text-align:center;
display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
overflow:hidden;/*去掉的话，输入框也可以点击*/
position:relative;/*相对定位，为 #file 的绝对定位准备*/
}
a.input:hover {
background:#f80;
}
a{
text-decoration:none;
color:#FFF;
}
#file {
opacity:0;/*设置此控件透明度为零，即完全透明*/
filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
font-size:100px;
position:absolute;/*绝对定位，相对于 .input */
top:0;
right:0;
}
然后是 javascript 代码，此处给了 原生的 javascript 和 jQuery 方式。
原生 javascript
代码如下
复制代码
<script type="text/javascript">
var input1 = document.getElementById("file");// 获得控件对象
input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
function inputPath() {
var input2 = document.getElementById("a"); // 获取 input 对象 input2
input2.value=input1.value;// 将控件 input1 的值赋给 input2
}
</script>
jQuery 方式
<script type="text/javascript">
$(function(){
$("#file").change(function(){// 当 id 为 file 的对象发生变化时
$("#a").val($("#file").val());//将 #file 的值赋给 #a
})
})
</script>
例3
先来看下在不同浏览器下，该控件的显示：
图一：
图二：
由以上两个图我们可以得到几个结论：
1、不同浏览器下，该控件的显示外观有很大不同。
2、在ie下，控件显示文件路径；在其他浏览器下，控件显示文件名。
3、无论怎样改变控件的宽度，控件的”浏览button“（或者文件上传button）的宽度不变（64px）。
还有隐藏的第四个特点：
4、在ie下，只有"浏览button"可点击；而其他浏览器下，文本显示区域也可以点击。
最初的时候，为了达到完全的统一，我的处理思路是：将真的<input type="file" />控件隐藏，用图片制作一个假的控件，当点击图片时，触发真控件的click事件，从而达到外表统一，又完成文件上传的目的。
但是，最终这种方法失败了。经闯闯同学指点，该方法在ie下会触发安全问题。
原因是：这种间接上传文件的方式，被ie认为是不安全的，将阻止文件向服务器传送。所以说，样式处理好了，功能还是没处理好。
最后解决办法：
将真的控件设置为透明的，浮在图片上。
这种情况下，伪控件图片设计就需要考虑之前提到的第3和第4个问题。
最终代码如下：
代码如下
复制代码
<body>
<input type="file" id="fileControl" value="选择文件"/>
</body>
?
代码如下
复制代码
<BR>jQuery.fn.extend({
fileControl:function(){
var argus = arguments[0];
return this.each(function(){
var paddingLeft = argus.paddingLeft,
width = argus.width?argus.width:$(this).width()-(paddingLeft?paddingLeft:0),
height = argus.height?argus.height:$(this).height(),
top = argus.top?argus.top:($(this).height()+parseInt(($(this).outerHeight() - $(this).height())/2)),
left = argus.left?argus.left:($(this).width()+parseInt(($(this).outerWidth() - $(this).width())/2)),
lineHeight = argus.lineHeight?argus.lineHeight:height,
<BR>//设置伪控件样式<BR>style = "position:relative; z-index:-1; background-position:top left; background-repeat:no-repeat;left:0px;top:-"+height+"px;";
style += argus.image?("background-image:url("+argus.image+");"):"";
style += "width:"+width+"px;";
style += height?("height:"+height+"px;"):"";
style += paddingLeft?("padding-left:"+paddingLeft+"px;"):"";
style += lineHeight?("line-height:"+lineHeight+"px;"):"";
$(this).wrap("<div></div>").after("<div id='fadeFile' ></div>").css({"width":"64px","opacity":"0"})
.next().attr("style",style);
$(this).change(function(){
showFile($(this),$(this).next());
});
function showFile(telem,felem){
var value = $(telem).val(),
pos = -1;
if((pos = value.lastIndexOf("\")) != -1){
value = value.slice(pos+1);
}
$(felem).text(value);
}
});
}
});
调用方法：
代码如下
复制代码
$(fileElem).fileControl(obj);
其中的fileElem为文件上传控件对象，obj为属性对象，包括以下属性：
image:伪控件图片路径。必须项。
width:图片宽。必须项。
height:图片高。必须项。
paddingLeft:控制上传文件名的显示横向位置。可选；默认值为0。
top:伪控件距离原控件起点的位置的上边距。可选；正值；默认为真控件的(高+(外高-高)/2)
left:伪控件距离原控件起点的位置的左边距。可选；正值；默认为真控件的(宽+(外宽-宽)/2)
lineHeight:文件名显示的纵向位置。可选；默认值为真控件的高。
例子：
代码如下
复制代码
$("#fileControl").fileControl({"image":"file.png","width":"505","height":"27","paddingLeft":"70"});
实现结果：
代码：
控件：
