如何美化input[type="file"]

基本思路是:

(1)首先在 input 外层套一个 div ;

(2)将 div 和 input 设置为一样大小(width和height);

(3)设置 div 为相对位置, input 为绝对位置,并将 input 的 top 和 right 设为 0 ;

这样, div 和 input 就重叠了,点击 div 就相当于点击 input ;

(4)设置 input 的 opacity 为 0 ,全透明,这样就只能看见 div 了;

至于 div 的样式就随便设置了。

html:

<form action="#" enctype="multipart/form-data" method="post">
<div class="fileupload">
<script>
function getFilename(){
var filename=document.getElementById("file").value;
if(filename==undefined||filename==""){
document.getElementById("filename").innerHTML="点击此处上传文件";
} else{
var fn=filename.substring(filename.lastIndexOf("\\")+1);
document.getElementById("filename").innerHTML=fn; //将截取后的文件名填充到span中
}
}
</script>
<span id="filename">点击此处上传文件</span>
<input type="file" name="file" id="file" onchange="getFilename()"/>
</div>
</form>

css:

 /*文件上传*/
.fileupload{
position: relative;
width:200px;
height:35px;
border:1px solid #66B3FF;
border-radius: 4px;
box-shadow: 1px 1px 5px #66B3FF;
line-height: 35px;
padding-left: 8px;
overflow: hidden;
}
.fileupload input{
position: absolute;
width:200px;
height:35px;
right:;
top:;
opacity:;
filter: alpha(opacity=0);
-ms-filter: 'alpha(opacity=0)';
}

注意:input[type="file"] 的文件路径是受保护的,用 js 获取不到,使用上传的插件可以获取到。(只是从前端的角度讲)

input[type="file"]的样式以及文件名的显示的更多相关文章

  1. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

  2. html中,文件上传时使用的<input type="file">的样式自定义

    Web页面中,在需要上传文件时基本都会用到<input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多 ...

  3. input[type='file']默认样式

    <input type="file" name="" id="" value="" /> 当input的ty ...

  4. html中input type=file 改变样式

    <style> #uploadImg{ font-size:12px; overflow:hidden; position:absolute} #file{ position:absolu ...

  5. html input[type=file] css样式美化【转藏】

    相信做前端的都知道了,input[type=file]和其他输入标签不一样,它的事件必须是在触发自身元素上,而不能是其他元素.所以不能简单的把input隐藏,放个button上去. <a hre ...

  6. input(type='file')上传多张照片并显示,传到后台

    以下内容为网络摘抄和实践修改所得,如有雷同,请谅解!!!! 1.首先是前端页面代码: 其中,<input type="file" id="file_input&qu ...

  7. 对input type=file 修改样式

    效果图先给: 在html中涉及到文件选择的问题,文件选择使用 input(class="filter_input form-control" type="file) 但是 ...

  8. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  9. 更改input【type=file】样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. ntopng基础

    当你在本地网络监控网络流量,根据流量大小.监控平台/接口.数据库类型等等,可以有许多不同的选择.ntopng是一套开源(遵循GPLv3协议)网络流量分析解决方案,提供基于web界面的实时网络流量监控. ...

  2. shell awk实战

    一.文本处理 1.按行提取关键字频次(如取第5列) awk 'BEGIN{FS="|"} {a[$5]+=1;} END {for(i in a) print i ":& ...

  3. MySQL初始化设置

    1 初始化数据: /usr/local/mysql/bin/mysqld --initialize-insecure --user=mysql --datadir=/opt/mysql/data -- ...

  4. 我不想用for循环

    为什么要挑战自己在代码里不写for loop?因为这样可以迫使你去使用比较高级.地道的语法或库.文中以python为例子,讲了不少大家其实在别人的代码里都见过.但自己很少用的语法. 这是一个挑战.我要 ...

  5. python web框架 django wsgi 理论

    django wsgi python有个自带的wsgi模块 可以写自定义web框架 用wsgi在内部创建socket对象就可以了 自己只写处理函数就可以了django只是web框架 他也不负责写soc ...

  6. 《FLASH PROGRAMMING 那些事》总结

    注明来自 http://www.ssdfans.com/?p=5589 以MLC为例: 对FGF(Floating Gate Flash)技术的,MLC programming一般分两步走:先prog ...

  7. Java中二叉树存储结构实现

    一.二叉树 二叉树指的是每个节点最多只能有两个子树的有序树.通常左边的子树被称为“左子树”(left subtree),右边的子树被称为右子树. 二叉树的每个节点最多只有2棵子树,二叉树的子树次序不能 ...

  8. PHP连接MYSQL操作数据库

    PHP连接MYSQL操作数据库 <?php $con = mysql_connect("localhost","root",""); ...

  9. Linux系统——本地yum仓库安装

    一.yum仓库概述 yum是基于rpm包管理,能够从指定的服务器自动下载rpm包并且安装,可以自动处理依赖性关系,并且一次安装所有依赖的软件包,无需繁琐地一次次下载.安装. 二.yum仓库安装的方式 ...

  10. 微信小程序组件radio

    表单组件radio:官方文档 Demo Code: Page({ data: { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: ' ...