input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。

html代码如下：

<div style="width:800px;margin:0 auto">
默认样式<br/>
<input type="file" name="" id="">
<br/>样式一<br/>
<a href="javascript:;" class="clickUpload"><input type="file" name="" id="">点击这里上传文件</a>
<div class="fileerrorTip"></div>
<div class="showFileName"></div>
样式二<br/>
<a href="javascript:;" class="clickUpload2">选择文件<input type="file" name="" id=""></a>
<br/>样式三<br/>
<input type="text" disabled name="picture_name" id="picture_name" value="">
<a href="javascript:;" class="picurlbtn"><input type="file">选择图片</a>
<p>http://www.haorooms.com/post/css_input_uploadmh</p>
</div>

对应css样式

a{text-decoration:none}
/*示例一*/
.clickUpload{position:relative;display:inline-block;padding:5px 10px;background:#fafafa;border:1px solid #ddd;border-radius:4px;overflow:hidden;color:#888}
.clickUpload input{position:absolute;font-size:100px;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer}
.clickUpload:hover{background:#eee;border-color:#ccc;color:#444;}
/*示例二*/
.clickUpload2{position:relative;display:inline-block;padding:5px 10px;background:#d0eeff;border:1px solid #99d3f5;border-radius:5px;overflow:hidden;color:#1e88c7;}
.clickUpload2 input{position:absolute;font-size:100px;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer;}
.clickUpload2:hover{background:#aadffd;border-color:#78c3f3;color:#004974;}
/*示例三*/
#picture_name{width:378px;padding:0 10px;height:38px;border:1px solid #b3b3b3}
#picture_name[disabled]{background:#efefef}
.picurlbtn{display:inline-block;width:112px;height:38px;line-height:38px;text-align:center;background:#3dbdf8;color:#fff;font-size:18px;border-radius:5px;cursor:pointer;position:relative;overflow:hidden;vertical-align:bottom}
.picurlbtn input{position:absolute;font-size:100px;right:0;top:0;opacity:0;filter:alpha(opacity=0);cursor:pointer}

js代码

$(".clickUpload").on("change","input[type='file']",function(){
	var filePath=$(this).val();
	if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("png")!=-1){
		$(".fileerrorTip").html("").hide();
		var arr=filePath.split('\\');
		var fileName=arr[arr.length-1];
		$(".showFileName").html(fileName);
	}else{
		$(".showFileName").html("");
		$(".fileerrorTip").html("您未上传文件，或者您上传文件类型有误！").show();
		return false
	}
})

$(".picurlbtn").on("change","input[type='file']",function(){
    var filePath=$(this).val();
    if(filePath.indexOf("jpg")!=-1 || filePath.indexOf("jpeg")!=-1 || filePath.indexOf("png")!=-1){
        $("#picture_name").attr("value",filePath);
    }else{
		$("#picture_name").attr("value","仅支持jpg,jpeg,png格式！");
        return false
    }
})