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. Elasticsearch template学习

    Elasticsearch template Elasticsearch存在一个关键问题就是索引的设置及字段的属性指定,最常见的问题就是,某个字段我们并不希望ES对其进行分词,但如果使用自动模板创建索 ...

  2. PAT甲级——A1085 Perfect Sequence

    Given a sequence of positive integers and another positive integer p. The sequence is said to be a p ...

  3. ASP.NET MVC生命周期与管道模型

      先来熟悉下asp.net请求管道 1.当客户端发送http://localhost:80/home/index请求时 2.首先到达服务端的内核模块HTTP.SYS(它监听80端口),通过访问注册表 ...

  4. 2019-2-18-VisualStudio-给项目添加特殊的-Nuget-的链接

    title author date CreateTime categories VisualStudio 给项目添加特殊的 Nuget 的链接 lindexi 2019-02-18 15:56:48 ...

  5. 最大似然估计(Maximum likelihood estimation)

    最大似然估计提供了一种给定观察数据来评估模型参数的方法,即:"模型已定,参数未知".简单而言,假设我们要统计全国人口的身高,首先假设这个身高服从服从正态分布,但是该分布的均值与方差 ...

  6. [转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

    上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...

  7. 初识css3 3d动画效果

    (先看我博客右上角的3d盒子动画效果,目前没做兼容处理,最好最新的chrome看)无意间看到网上css3写的3d动画效果,实在炫酷,以前理解为需要js去计算去写,没想到css直接可以实现.于是开始研究 ...

  8. [编织消息框架][netty源码分析]11 ByteBuf 实现类UnpooledHeapByteBuf职责与实现

    每种ByteBuf都有相应的分配器ByteBufAllocator,类似工厂模式.我们先学习UnpooledHeapByteBuf与其对应的分配器UnpooledByteBufAllocator 如何 ...

  9. 19-10-15-W

    暴力终于不跪了$\text{QvQ}$ z总j结 考试开始看到几个大字:Day1 Happy-(××终于不用爆〇了哈哈哈哈!!) 开T1.一看,不是在线仙人球嵌套动态网络路径剖分优化的分支定界贪心剪枝 ...

  10. 扫描线矩形周长的并 POJ1177

    //扫描线矩形周长的并 POJ1177 // 我是按x轴 #include <iostream> #include <cstdio> #include <cstdlib& ...