<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML Input file美化</title>
<style type="text/css">
a{text-decoration:none;}
a[class="button-selectimg"],input[type='submit']{color:#FAFAFB;padding:8px 16px;border:1px solid #fff;background:#4c95f7; font-size: 16px }
.input-file{margin:200px 300px;}
input[id="avatval"]{padding:3px 6px;padding-left:10px;border:1px solid #E7EAEC;width:230px;height:25px;line-height:25px;background:#FAFAFB;border-radius:2px;}
input[type='file']{border:0px;display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#avatsel").click(function(){
$("input[type='file']").trigger('click');
});
$("#avatval").click(function(){
$("input[type='file']").trigger('click');
});
$("input[type='file']").change(function(){
$("#avatval").val($(this).val());
});
});
</script>
</head>
<body>
<form action="input.html" method="get" enctype="multipart/form-data">
<input type="text" id="avatval" readonly="readonly" style="vertical-align: middle;"/>
<input type="file" name="avatar" id="avatar"/>
<a href="javascript:void(0);" class="button-selectimg" id="avatsel">浏览</a>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
