在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用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. .NET框架体系结构

    刚开始接触.NET很疑惑,看完视频也不是太懂,通过总结和反复,从概括和概念入手,慢慢变得清晰了.这篇博客主要是我对.NET基础知识的了解,算作积累吧. .NET框架体系结构 由四个主要部分组成     ...

  2. linq 实现动态 orderby

    class Pet { public string Name{get;set;} public int Age{get;set;} } void Main() { Pet[] pets = { }, ...

  3. iOS阶段学习第15天笔记（NSDictionary与NSMutableDictionary 字典）

    iOS学习(OC语言)知识点整理 一.OC中的字典 1)字典:是一个容器对象,元素是以键-值对(key-value)形式存放的,key和value是任意类型的对象,key是唯一的,value可以重复 ...

  4. 【C#进阶系列】18 特性Attribute

    这个东西有的叫定制特性,然而我喜欢直接叫特性,但是这样的话一些人不知道我说的是什么,如果我说是Attribute的话那么知道的或者用过的就都懂了. 还记得讲到枚举和位标志那一章,关于位标志,有一个[F ...

  5. 解决在android开发中ViewPager中Gallery无法滑动问题

    我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...

  6. web工程依赖的问题

    http://blog.csdn.net/testcs_dn/article/details/43764497 做个记录

  7. 《Java4android》视频学习笔记——面向对象的应用（一）

    ---恢复内容开始--- 有一台HP打印机需要一个程序来实现开机,打印,关机这三个功能 class HPprinter { void open(){ System.out.println(" ...

  8. paramiko 遭遇socket.error: Socket is closed 错误的解决办法

    似乎是connection自己断了解决的办法是在创建conn的时候添加下面这句 conn.keep_this = conn_session 完整代码 def create_a_conn(ip_addr ...

  9. T3 - 构建大型 Web 应用的 JavaScript 框架

    T3 是一个用于构建大型 Web 应用程序的客户端 JavaScript 框架.T3 和大多数的 JavaScript 框架不同.它的意思是一小部分的整体架构,它允许你建立可扩展的客户端代码.T3 应 ...

  10. CSS实现DIV水平 垂直居中-1

    水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> ...