模拟input type=”file” 修改file的样式

模拟input type=”file”  修改file的样式:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js” type=”text/javascript”></script>
<script>
$(function(){
$(“#fileField”).change(function(){
$(“#textfield”).val($(“#fileField”).val());
});
});
</script>
<style>
body{ font-size:14px;}
.type-file-box{ position:relative;width:260px}
input{ vertical-align:middle; margin:0; padding:0}
.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}
.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
</style>
<div>
<form id=”form1″ name=”form1″ method=”post” action=””>
<input type=”text” id=”textfield” name=”textfield”>
<input type=”submit” value=”浏览…” id=”button” name=”button”>
<input type=”file” size=”28″ id=”fileField” name=”fileField”>
</form>
</div>

以上是html、css、js写的例子。原理是让file表单通过css透明,然后通过js把file取到的值复制到div上(可看见的模拟file);让人产生file被修改的感觉。

附上附件。修改file的样式(点击下载例子)