css3美化文件上传按钮（笔记）

先上效果图：引用演示地址：http://tension.name/demo/css-fake-file-inputs/

css3美化文件上传按钮（笔记）

<div class="uploader white">
<input type="text" class="filename" readonly="readonly"/>
<input type="button" name="file" class="button" value="Browse..."/>
<input type="file" size="30"/>
</div>

然后是关键的部分js。

$(document).ready(function(){
$("input[type=file]").change(function(){$(this).parents(".uploader").find(".filename").val($(this).val());});
$("input[type=file]").each(function(){
if($(this).val()==""){$(this).parents(".uploader").find(".filename").val("No file selected...");}
});
});

然后就是一堆一堆的css3，各种阴影，各种定位，各种模拟神马的。