http://blog.csdn.net/comikey/article/details/8954479
解决思路是把input 放在文字的上边,弄成透明的,这样在点文字时,实际是点击了input,这样就实现了文件的上传。是不是很简单呀。
具体代码:
<style>
#uploadImg{ font-size:12px; overflow:hidden; position:absolute}
#file{ position:absolute; z-index:100; margin-left:-180px; font-size:60px;opacity:0;filter:alpha(opacity=0); margin-top:-5px;}
</style>
<span id="uploadImg">
<input type="file" id="file" size="1" >
<a href="#">上传图片</a> </span>
这样你就可以对样式进行想要的改变,改成图片,还是文字带背景。。。等等 想怎么改就怎么改。
而且还兼容ie6/ie7/firefox
1 <li class="f_input"><span class="t">上传简历:</span> 2 <span id="uploadImg"> 3 <input type="file" id="file" size="1" > 4 <a href="#">点击上传简历</a> 5 </span> 6 <p id="em">未上传文件</p> 7 </li>
1 .sq_list li.f_input #em{margin-left: 195px;line-height: 32px;color: #666;font-size: 13px;} 2 #uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 104px;height: 32px;} 3 #file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 104px;height: 32px;opacity:0;filter:alpha(opacity=0);} 4 #uploadImg a{cursor:pointer;background:#0e2d43;position: absolute;top:0;left:0;display: block;width: 104px;height: 32px;text-align: center;line-height: 32px;color:white;font-size:14px;font-weight:normal;}
文件名的传递 ---全路径获取
$(‘#file‘).change(function(){ $(‘#em‘).text($(‘#file‘).val()); });
文件名的传递 ---只获取文件名
1 var file = $(‘#file‘), 2 aim = $(‘#em‘); 3 file.on(‘change‘, function( e ){ 4 //e.currentTarget.files 是一个数组,如果支持多个文件,则需要遍历 5 var name = e.currentTarget.files[0].name; 6 aim.text( name ); 7 });
时间: 2024-10-13 23:19:57