在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用input的file控件来实现就好啦~

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style></style>

</head>

<body>

　　<input type="file" value="选择文件" />

</body>

</html>

效果图是酱婶的：

注意！别以为这个是由一个text和一个button组合成的，其实它就是一个file控件哦

今天工作中遇到要求：不显示“未选择任何文件”，捣鼓够一个小时，发现设置它的width值就搞定了：

代码： <input type="file" value="选择文件" style="width:70px;"/>

width值设置为70px刚刚好，如下图：

【美化】

思路：

　　外面的一层div是为了给里面的input提供位置参考，因为写样式的时候需要相对定位，使真正的file控件覆盖在模拟的上面，然后隐藏掉file控件（即使file控件不可见）

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    .file-box{ position:relative;width:340px}

    .txt{ height:22px; border:1px solid #cdcdcd; width:180px;}

    .btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

    .file{ position:absolute; top:0; right:80px; height:24px; opacity:0;width:260px; }

  </style>

</head>

<body>

    <br><br>

    <div class="file-box">

        <form action="" method="post" enctype="multipart/form-data">

        <input type='text' name='textfield' id='textfield' class='txt' />

        <input type='button' class='btn' value='浏览' />

        <input type="file" name="fileField" class="file" id="fileField" size="28"/>

    </form>

    </div>

</body>

</html>

效果：

美不美我说了不算

下班咯~

2016.6.30

input的file 控件及美化的更多相关文章

  1. 页面加载完成触发input[type="file"]控件问题

    由于浏览器厂家的限制,不同的浏览器不开放页面加载完成就允许触发input[type="file"]控件 测试 Chrome .火狐 .IE .微信客户端QQ =>桌面端: C ...

  2. 美化 input type=file控件

    大家都知道input的type=file控件默认样式是不能修改的 可以通过一个小技巧处理下 html: <a href="javascript:;" class=" ...

  3. 美化type="file"控件

    对于type="file"而言是一个不大好看的控件.如果不美化他一下,总感觉自己的网站有些缺乏了美感 上代码: <!DOCTYPE html> <html> ...

  4. 为什么Jquery对input file控件的onchange事件只生效一次

    今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解 ...

  5. HTML5中的input type为file控件限制上传文件类型及扩展

    简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...

  6. Jquery对input file控件的onchange事件只生效一次的解决方案

    1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑 ...

  7. 使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件

    使用input:file控件在微信内置浏览器上传文件返回未显示选择的文件 原来的写法: <input type="file" accept="image/x-png ...

  8. css input checkbox复选框控件 样式美化的多种方案

    checkbox复选框可能是网站中常用的html元素,但大多数人并不满意它的默认样式,这篇文章就讲讲如何实现input checkbox复选框控件 样式美化效果. 资源网站大全 https://55w ...

  9. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

随机推荐

  1. ASP.NET MVC ValueProvider小结

    在Model绑定中,Model的数据来源有很多种,在MVC里面则定义了一套ValueProvider的组件来处理Model数据来源多样性的问题,ValueProvider整个结构类似于字典(Dictr ...

  2. spring入门（二）【加载properties文件】

    在开发过程当中需要用到配置信息,这些信息不能进行硬编码,这时配置文件是一个比较好的方式,java提供了properties格式的文件,以键值对的方式保存信息,在读取的时候通过键获得键对应的值,spri ...

  3. 向量自回归模型VS风险价值模型(VAR&VaR)

    单从外观上看,VAR&VaR两个模型很容易混淆,但就模型方法和用处两者截然不同,R语言作为数据分析的有力工具,其函数包库中包含各种各样的统计模型.通过vars包可以调用向量自回归模型,通过Pe ...

  4. mysql本地可以访问 网络不能访问

    远程登陆数据库的时候出现了下面出错信息: ERROR 2003 (HY000): Can't connect to MySQL server on 'xxx.xxx.xxx.xxx', 经过今天下午的 ...

  5. ANDROID 应用退出

    在android中finish()和system(0)都只能退出单个activity.杀进程等的等方式都不行~~~解决问题: 在针对 多activity中退出整个程序,例如从A->B->C ...

  6. 文件并发(日志处理)--队列--Redis+Log4Net

    多线程操作同一个文件时会出现并发问题.解决的一个办法就是给文件加锁(lock),但是这样的话,一个线程操作文件时,其它的都得等待,这样的话性能非常差.另外一个解决方案,就是先将数据放在队列中,然后开启 ...

  7. Git删除错误提交的commit

    git reset --hard <commit_id> git push origin HEAD --force

  8. （转）T-SQL查询处理执行顺序（一）

    对于T-SQL编程,用得最广泛的,莫过于查询(Querying).要想写出高质量.高性能的查询语句,必须深入地了解逻辑查询处理. 一.逻辑查询处理的各个阶段 (5)SELECT DISTINCT TO ...

  9. 附7 turbine

    一.作用 聚集同一个微服务的相同的commandKey.Threadpool.commandGroupKey数据进行聚合 二.配置 1.集群(cluster)(turbine聚集数据的粒度) turb ...

  10. CSS3与页面布局学习笔记（一）——概要、选择器、特殊性与刻度单位

    web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...