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. 左神算法书籍《程序员代码面试指南》——1_01设计一个有getMin功能的栈

    [题目] 实现一个特殊的栈,在实现栈的基本功能的基础上,再实现返回栈中最小元素的操作. [要求] 1.pop.push.getMin操作的时间复杂度都是O(1).2.设计的栈类型可以使用现成的栈结构. ...

  2. logcat日志文件

    android日志系统提供了记录和查看系统调试信息的功能,日志都是从各个软件和一些系统的缓冲区中记录下来的,缓冲区可以通过logcat命令来进行查看和使用 开发者选项,有个选项叫做“日志记录器缓冲区大 ...

  3. 11-4-while和dowhile

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Property 'validate' does not exist on type 'Element | Element[] | Vue | Vue[]'. Property 'valid...

    使用vue-cli 3.0+Element-ui时候,调用form表单校验时候出现的问题是: Property 'validate' does not exist on type 'Element | ...

  5. [转]Windows钩子

    Windows钩子 Windows应用程序的运行模式是基于消息驱动的,任何线程只要注册了窗口类就会有一个消息队列来接收用户的输入消息和系统消息.为了取得特定线程接收或发送的消息,就要 Windows提 ...

  6. python 连接mssql数据库

    1.目标数据sql2008 R2 ComPrject=>TestModel 2.安装python 连接mssql 模块 运行 pip install pymssql-2.2.0.dev0-cp3 ...

  7. 关于JEECMS套站工具的使用要点

      第一步:在[界面—资源]下面引入资源文件(js,css,img…) 第二步:在[界面—模板]下面将网站的入口页面写在[index]文件下 此时修改index页面中的 js,css,图片 的路径,路 ...

  8. Java的一些小知识

    Switch和If的区别: Switch case成功后将不再向下继续执行,而If却要每个条件判断一遍.过于浪费: Java中的多态: 方法重载: 通常是指在同一个类中,相同的方法名对应着不同的方法实 ...

  9. JDK、Eclipse、Tomcat、Maven、IDEA 常见问题

    windows操作分成了32位和64位的系统,不同的系统安装的软件也不一样. 查询电脑操作系统是多少位? J D K 01. 下载安装 02. 目录解释 03. 配置环境变量 (JDK安装成功后进行配 ...

  10. spring源码学习之容器的扩展（二）

    六 BeanFactory的后处理BeanFactory作为spring容器的基础,用于存放所有已经加载的bean,为了保证程序上的高扩展性,spring针对BeanFactory做了大量的扩展,比如 ...