在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用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. Redis系列二之事务及消息通知

    一.事务 Redis中的事务是一组命令的集合.一个事务中的命令要么都执行,要么都不执行. 1.事务简介 事务的原理是先将一个事务的命令发送给Redis,然后再让Redis依次执行这些命令.下面看一个示 ...

  2. jquery练习（一次性赋予多个属性值）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

  4. struts2、jsp的简单路径的简单拦截

    <filter> <filter-name>UsersFilter</filter-name> <filter-class>com.web.UsersF ...

  5. 修正 ListView 搜寻问题

    问题:如果 SearchEdit 里已输入过搜寻字,再新建 ListView 项目后,会无法显示. 适用:Delphi XE5 源码下载:[原创]修正ListView搜寻问题.zip procedur ...

  6. jQuery实现发送短信验证码后60秒倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

  7. Monkey测试1——Monkey的使用

    Monkey工具使用 一. 什么是Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输入.手势输入等),实 ...

  8. java 多态奇怪现象，子类还没有构造完成就开始干活了，谁来帮我解释？

    java代码: package test.extend; public class Base { public Base(){ System.out.println("基类构造") ...

  9. MD5加密操作

    MD5加密操作:MD5加密算法原理MD5的全称是Message-Digest Algorithm 5(信息-摘要算法),它的作用是让大容量信息在用数字签名软件签署私人密匙前被"压缩" ...

  10. [.NET] 使用Json.NET提供依赖注入功能(Dependence Injection)

    [.NET] 使用Json.NET提供依赖注入功能(Dependence Injection) 前言 在一些小型项目的开发情景里,系统不需要大型DI Framework所提供的:单一对象生成.生命周期 ...