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

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

input file样式,文件路径、文件名的获取的相关文章

自定义input file样式

自定义input file样式:一般都是通过隐藏input,通过定义label来实现.这种做法要注意的是label的for属性要指定input对应的id; <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #file { display: none;

input type=file 选择文件路径获取方法

input file上传按钮选择文件后的value是无法直接获取到的,本文借用js方法获取file选中文件的物理路径和文件名 代码如下: DOM结构: <input type="text" id="textfield" /><br/> <a class="a-upload"> <input type="file" name="file" id="fileF

input(file)样式修改及上传文件名显示

实现思路: a标签包裹input元素 设置a标签为上传按钮的样式,相对定位 设置input为透明,绝对定位,覆盖到a上面 效果:看到的按钮是a的样式,点击时实际是点击input元素.样式和功能都具备 html代码: <a href="javascript:;" class="file gradient">选择文件 <input type="file" > </a> CSS代码: .file { position

动态input file多文件上传到后台没反应的解决方法!!!

其实我也不太清除具体是什么原因,但是后面就可以了!!! 我用的是springMVC 自带的文件上传 1.首先肯定是要有springMVC上传文件的相关配置! 2.前端 这是动态input file上传到后台没反应的写法(页面上写死的上传到后台是可以的) 这段代码是写在table>>下的form表单里的 <input type="button" name="button" value="添加附件" onclick="ad

ajax input file 提交文件

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>        <title>Html5 Ajax 上传文件</ti

input file 样式以及获取选择文件方法集合

样式一(http://www.cnblogs.com/jason-liu-blogs/archive/2013/06/13/3133377.html) <style> a{display:inline-block; width:100px; height:40px; background:red; position:relative; overflow:hidden;} a:hover{background:green;} input{position:absolute; right:0; t

获取当前文件的文件名,获取去当前文件的url路由地址

//获取当前文件名 function GetCurUrl() { if(!empty($_SERVER["REQUEST_URI"])) { $scriptName = $_SERVER["REQUEST_URI"]; $nowurl = $scriptName; } else { $scriptName = $_SERVER["PHP_SELF"]; if(empty($_SERVER["QUERY_STRING"])) {

linux 如何获取当前文件路径(source如何获取当前文件路径 bash如何获取当前文件路径)

bash  如何获取当前文件的绝对路径 #!/bin/bash export  bashpath=$(cd `dirname $0`;pwd) echo $bashpath source 文件获取当前文件的绝对路径 #!/bin/bash # 下面是输出当前文件的绝对路径 cd $(dirname $BASH_SOURCE) # echo $(pwd)/$(basename $BASH_SOURCE) temp_file=`echo $(pwd)/$(basename $BASH_SOURCE)

html input file 设置文件类型

解决方案: 使用 input 的 accept 属性指定接受文件类型 -----------更新--------------- 之前的代码有个缺点,打开文件窗口时会自动筛选文件夹下所有符合设定类型的文件,造成文件窗口延迟一定时间. 优化的方法是列出你需要的 详细 类型,比如: For Image Files (.png/.jpg/etc), use: <input type="file" accept="image/x-png,image/gif,image/jpeg,