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

    MVC是现今挺被推崇的一种架构模式,而MVP在MVC的基础对视图与模型上再解耦,使结构和各自的功能也有所改变.在去年鄙人也尝试了一下使用MVP做了一个小Demo,作为了MVC的一个变体,MVP还分了两 ...

  2. ASP.NET MVC 网站开发总结（四）——校友平台开发总结

    又历经一个多月的努力,学校的一个校友平台项目也接近内测的尾声了,简单的总结一下这次的项目开发. 与上次做Wing工作室的门户网站相比,同样是团队开发,参与的人员多了一个,用的时间也差不多一个月,但从总 ...

  3. 通过泛型数据，操作SQL数据库

    本人在操作数据库的时候,采用将对象的形式操作传入数据库,经过大量百度和朋友帮助,总结出如下两个接口.用于插入数据,提取数据. 要这样操作的前提条件,就是类名和表名一致,类字段和表字段一致就可以了 // ...

  4. 基于吉日嘎底层架构的Web端权限管理操作演示-日志管理

    权限管理要实现的效果是对“ 谁”可以访问“什么内容”,可以进行“哪些操作” 一系列权限的精细化控制.衡量一个软件好坏的重要标准是:它的权限体系是否足够细致.是否可以立体勾勒出信息对象的访问控制.前面4 ...

  5. ASP.NET使用NPOI加载Excel模板并导出下载

    1.为什么要使用NPOI导出Excel? 一.解决传统操作Excel遇到的问题: 如果是.NET,需要在服务器端装Office,且及时更新它,以防漏洞,还需要设定权限允许.NET访问COM+,如果在导 ...

  6. 【Java每日一题】20161025

    20161024问题解析请点击今日问题下方的"[Java每日一题]20161025"查看 package Oct2016; import static java.lang.Math ...

  7. PagerTabStrip及自定义的PagerTab

    如图是效果图      开发中经常会用到上面是一个Tab下面是一个ViewPager(ViewPager再包含几个Fragment),当点击Tab或是滑动ViewPager,Tab及ViewPager ...

  8. 使用HttpDownLoadHelper下载文件

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.IO ...

  9. 框架Spring笔记系列 一 基础

    主题:Spring 1.什么样的问题,使得Spring框架应用而生?使用Spring解决了那些问题? 2.

  10. Atom 备份神器 —— Sync Settings

    当 Atom 的扩展越装越多,配置也越来越偏离了系统默认设置时,一旦电脑重装后需要复原开发环境,这将是一件比较头疼的事,但今天发现一个扩展,可以解决这一问题,那就是「Sync Settings」,根据 ...