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

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

<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，各种阴影，各种定位，各种模拟神马的。

转载于:https://www.cnblogs.com/meimeiwa/archive/2011/11/22/inputfile.html