模拟input type=file

日期：2013-11-25  来源：攀枝花惠康网络公司

这是一个根基的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。

表单中的input type=”file”在前端开发中经常会用到，可是很悲剧的是input type=”file”在各个浏览器下默示不统一，样式很难起浸染；

凡是我的设计师长短常爱美的，如不美观真的要还原设计稿，只能经由过程文本框和按钮去模穆矣闽input type=”file”。

HTML代码如下：

<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>

$(function(){
var textButton="<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value=http://www.css88.com/archives/'浏览...' class='type-file-button' />"
$(textButton).insertBefore("#fileField")；
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);

这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了 demo演示：http://www.css88.com/demo/input-file/

注重：size=”28″是在firefox下input type=”file”的宽高是不能经由过程样式来界说的，所以用了size属性来节制input type=”file”的宽度

CSS代码如下：

.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 }

注重：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯现实上点击的input type=”file”； js代码：