input file样式，文件路径、文件名的获取-白红宇

input file样式，文件路径、文件名的获取

阅读量：6608 次

发布时间：2019-06-24

本文共 1461 字，大约阅读时间需要 4 分钟。

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>

这样你就可以对样式进行想要的改变，改成图片，还是文字带背景。。。等等想怎么改就怎么改。

而且还兼容ie6/ie7/firefox

1 上传简历：2    3       4         点击上传简历 5    6    未上传文件
7

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     });

转载于:https://www.cnblogs.com/ghfjj/p/6306222.html

你可能感兴趣的文章

Android之BroadcastReceiver1