1. 原生file input大小、按钮文字等UI自定义

元素input的原生样式，不是太好看：

有一种方法是这样的：
让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。

然而，此方法有一些不足：

  1. 尺寸控制不灵活。然后高度控制也不精准，我们很难正好覆盖在好看的自定义按钮上。
  2. 样式不好控制，按钮的hover态以及active态不好处理。
  3. HTML结构限制以及定位成本。

更好的方法是，使用label元素与file控件关联，好处在于：

  1. 点击自定义的漂亮按钮就是点击我们file控件；
  2. 没有尺寸控制不精确的问题；
  3. 没有不能响应hover态active态的问题；
  4. 我们的漂亮按钮甚至可以在form表单元素的外面

代码如下：

<style>

    .ui_button {

        padding:10px;

        background: #01AAED;

        color: #fff;

    }

    .ui_button:hover {

       opacity: 0.9;

    }

</style>

<body>

<form>

        <label class="ui_button" for="xFile">上传文件</label>

        <input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);">

        <span>文件以.video结尾</span>

    </form>

</body>

样式如下：

2. file类型控件的accept属性

input file类型控件有一个属性，名为accept,可以用来指定浏览器接受的文件类型.

如果是上传图片，可以使用：

上传视频类型，可以使用：

如果是其他类型的：可以参考下：

然后，多个属性值使用逗号分隔，例如：

input file只选择文件夹而不是文件

试试下面的代码，测试了下，Chrome浏览器下是可以的，Firefox浏览器下也是可以的，safari和IE目前还不行，有兼容性问题。

HTML input type=file文件选择表单的汇总（二）的更多相关文章

  1. HTML input type=file文件选择表单的汇总（一）

    HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题. 最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因: ...

  2. input type=file文件选择表单元素二三事

    一.原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-dat ...

  3. type=file 文件修改表单 名称不能正常回显的问题

     easyui 框架下   代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32p ...

  4. C# 模拟提交带附件（input type=file）的表单

    今天调用某API时,对于文档中的传入参数:File[] 类型,感觉很陌生,无从下手! 按通常的方式在json参数中加入file的二进制数据提交,一直报错(参数错误)!后来经过多方咨询,是要换一种 表单 ...

  5. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  6. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  7. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  8. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  9. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

随机推荐

  1. Netty 框架基本流程

    服务端 package com.mypractice.netty.server; import java.net.InetSocketAddress; import io.netty.bootstra ...

  2. C#生成指定范围内的不重复随机数

    C#生成指定范围内的不重复随机数 // Number随机数个数 // minNum随机数下限 // maxNum随机数上限 public int[] GetRandomArray(int Number ...

  3. css 渐变背景

    background: linear-gradient(left,#fa7f6d, #fc5e7f); left: 从左边开始

  4. CAS增加免登陆（Remember Me）功能

    1. 打开deployerConfigContext.xml 在 authenticationManager 的bean中增加 <property name="authenticati ...

  5. CAS添加验证码功能

    1.  cas.war 下面的web-inf/web.xml  lib添加  kaptcha.jar kaptcha.jar通过maven获取 <dependency> <group ...

  6. net.sf.json JSONObject与JSONArray总结

    JSONObject:json对象,就是一个键对应一个值,使用的是大括号{ },如:{key:value} JSONArray:json数组,使用中括号[ ],只不过数组里面的项也是json键值对格式 ...

  7. mybatis的Example的使用

    MyBatis的Mapper接口以及Example的实例函数及详解 一.mapper接口中的方法解析 mapper接口中的函数及方法 方法 功能说明 int countByExample(UserEx ...

  8. day20 作业

    目录 今日作业 1.下面这段代码的输出结果将是什么?请解释. 2.多重继承的执行顺序,请解答以下输出结果是什么?并解释. 3.什么是新式类,什么是经典类,二者有什么区别?什么是深度优先,什么是广度优先 ...

  9. Extjs4 的一些语法 持续更新中

    一.给GridPanel增加成两行toolbar tbar: { xtype: 'container', layout: 'anchor', defaults: {anchor: '0'}, defa ...

  10. 渗透神器----BurpSuite_pro_v2.1

    burp2.1版本 主要有两个文件 大小有270M 目前是最新的版本 下载地址 链接: https://pan.baidu.com/s/1UjdwBN-S2TbgZ8iKiBcEhw 提取码: 9h7 ...