第一种：CSS实现
<style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:relative; width: 256px; } .fileInput{ height:256px; overflow: hidden; font-size: 300px; position:absolute; right:0; top:0; opacity: 0; filter:alpha(opacity=0); cursor:pointer; } --> </style> <div class="fileInputContainer"><input class="fileInput" id="" type="file" name=""></div>
第二种：JavaScript实现
<div class="face"> <p><img class="normalFace" src="./images/upload.jpg" οnclick="fileSelect();"></p> <form id="form_face" enctype="multipart/form-data" style="width:auto;"> <input type="file" name="fileToUpload" id="fileToUpload" οnchange="fileSelected();" style="display:none;"> </form> </div> <script type="text/javascript"> function fileSelect() { document.getElementById("fileToUpload").click(); } function fileSelected() { // 文件选择后触发次函数 } </script>