input file樣式，文件路徑、文件名的獲取

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

 

<li class="f_input"><span class="t">上傳簡歷：</span>
   <span id="uploadImg">
      <input type="file" id="file" size="1" >
        <a href="#">點擊上傳簡歷</a> 
   </span>
   <p id="em">未上傳文件</p>
</li>

.sq_list li.f_input #em{margin-left: 195px;line-height: 32px;color: #666;font-size: 13px;}
#uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 104px;height: 32px;}
#file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 104px;height: 32px;opacity:0;filter:alpha(opacity=0);}
#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());
});

文件名的傳遞 ---只獲取文件名

var file = $('#file'),
    aim = $('#em');
    file.on('change', function( e ){
        //e.currentTarget.files 是一個數組，如果支持多個文件，則需要遍歷
        var name = e.currentTarget.files[0].name;
        aim.text( name );
    });