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. day69test

    目录 前端  vue main.js  vue CarTag.vue 小组件  vue Nav.vue小组件  vue Home.vue 页面  vue Car.vue 页面  vue CarDeta ...

  2. Referenced assembly does not have a strong name

    Step 1 : Run visual studio command prompt and go to directory where your DLL located. For Example my ...

  3. 记一次log4j日志文件小事故

    最近散仙在做公司的一个跟搜索有关的数据分析项目,主要就是统计搜索的转化率,目的主要有以下几个: (1)通过数据分析挖掘,找出搜索业务在整个平台系统里的GMV里所占份额 (2)给公司的搜索算法调优,提供 ...

  4. java笔试之数字颠倒

    描述: 输入一个整数,将这个整数以字符串的形式逆序输出 程序不考虑负数的情况,若数字含有0,则逆序形式也含有0,如输入为100,则输出为001 package test; import java.ut ...

  5. hbase master一直报启动不起来问题（region空洞和region卡在spilt）

    数据不重要或者一直卡着的情况下,可以切换hdfs用户到hbase的wal目录下对spilting的数据进行重命名.具体步骤如下 1.关闭hbase集群 2.切换hdfs用户 3.到hbasewal目录 ...

  6. main函数执行前后还会发生什么

    问题分析 首先main()函数只不过是提供了一个函数入口,在main()函数中的显示代码执行之前,会由编译器生成_main函数,其中会进行所有全局对象的构造以及初始化工作.简单来说对静态变量.全局变量 ...

  7. [转]模块化——Common规范及Node模块实现

    Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javascrip ...

  8. sql错误;The user specified as a definer ('tester'@'%') does not exist

    在复制和导数据库时提示错误:SELECT command denied to user 'tester'@'%' for column 'uID' in table 'view_enterprise_ ...

  9. 【踩坑】nextSibling 和nextElementSibling的区别

    DOM 使用nextSibling属性返回指定节点之后的下一个兄弟节点,(即:相同节点树层中的下一个节点). nextSibling属性与nextElementSibling属性的差别: nextSi ...

  10. Python爬虫笔记【一】模拟用户访问之表单处理（3）

    学习的课本为<python网络数据采集>,大部分代码来此此书. 大多数网页表单都是由一些HTML 字段.一个提交按钮.一个在表单处理完之后跳转的“执行结果”(表单属性action 的值)页 ...