在一些网站进行上传时，当单击了“浏览”按钮之后会弹出【选择文件】的对话框。想要实现这一功能，用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. c#初学-多线程中lock用法的经典实例

    本文转载自:http://www.cnblogs.com/promise-7/articles/2354077.html 一.Lock定义     lock 关键字可以用来确保代码块完成运行,而不会被 ...

  2. WIN-CE系统架构

    WIN-CE 系统架构分为素部分:硬件层.OEM 层.操作系统层.应用层 http://hovertree.com/hvtart/bjae/oy9pqb94.htm 硬件层: 由CPU .存储器.I/ ...

  3. Web前端：HTML~CSS~JS

    网页主要由3部分组成:结构.表现.行为.目前网页的新标准是W3C,模式是HTML.CSS.JavaScript,这是前端开发最核心的3个技术.前2个技术的最新版本分别为HTML5.CSS3.  “HT ...

  4. iOS 阶段学习第十天笔记（字符串操作）

    iOS学习(C语言)知识点整理 一.字符串的操作 1)字符串的存储,字符数组,在堆里面申请内存空间. 实例代码: #include <stdlib.h> #include <stri ...

  5. Scalaz（14）－ Monad：函数组合－Kleisli to Reader

    Monad Reader就是一种函数的组合.在scalaz里函数(function)本身就是Monad,自然也就是Functor和applicative.我们可以用Monadic方法进行函数组合: i ...

  6. webapi的返回类型，webapi返回图片

    1.0 首先是返回常用的系统类型,当然这些返回方式不常用到.如:int,string,list,array等.这些类型直接返回即可. public List<string> Get() { ...

  7. velocity-tools-beta1.jar与velocity-tools.jar不兼容

    今天在升级了某些依赖jar的版本启动一项目后,velocity中的有些定义在common.vm中变量居然变成了null,没能include进来导致,而没升级的环境是ok的,经过反查,最后发现是将vel ...

  8. 线程（三）__Interrupt 、setDaemon()、join

    一.wait和sleep区别? 1.wait可以指定也可以不指定.sleep必须指定时间. 2.在同步中时,对cpu的执行权和锁的处理不同.它们都能将线程处于冻结状态. wait:释放执行权,释放锁. ...

  9. 15款免费的响应式 WordPress 主题下载

    响应式设计主题最适合杂志网站,博客网站,想要在自己网站上展示自己作品的用户.支持视网膜显示使其在 iPad,iPhone,Mackbook,iMac 等设备上有更高的分辨率. 响应式和现代设计风格的多 ...

  10. php扩展php_curl windows 安装问题

    关于安装php扩展php_curl 出现的提示错误,导致php_curl无法安装 apache 错误日志: PHP Warning: PHP Startup: in Unknown on line 0 ...