文档章节

File杂谈——初识file控件

Mr.Zheng
 Mr.Zheng
发布于 2015/06/16 16:13
字数 1274
阅读 174
收藏 10

首先我说明下,这里介绍的file控件指的是网页中的FileUpload对象,也就是我们常见的<input type="file">。如果你不是想寻找这方面的东西,就可以绕道了。

功能

当我们需要在网页中实现文件上传功能的时候,file控件就可以大显身手了。HTML文档中每添加一个<input type="file">,实际就是创建了一个FileUpload实例对象。用户可以通过点击file控件选择本地文件,当我们提交包含该file控件的表单时,浏览器会向服务器发送用户选中的本地文件。从而将本地文件传输到服务器,供其他网络用户下载或使用,实现文件上传功能。

美中不足

无可厚非,file控件很强大,给网页上传文件带来了极大的便利。但是,它并非完美!

首先,从控件本身而言,我们可以通过value属性获取到用户选择的文件名称,但出于安全性等因素考虑,该属性无法指定默认值,并且该属性为只读属性。

其次,恐怕也是file控件令很多开发者头疼的地方。file控件在各个主流浏览器之间的表现大有差异,给用户带来的视觉感受大相径庭,而且几乎不可能通过直接修改样式来达到统一,下面我用一张图来更清晰的告诉大家:

input file

一目了然了吧?更可恶的是“选择文件”、“Browse...”、“浏览...”三处文字均无法更改!!然而,这仅仅是视觉上的差异,不同浏览器下file控件的行为也存在一些差异:

  • A1、A2、A3、A4、A6,五处我们均可以单击触发文件选择
  • A5 处我们却需要双击才能触发文件选择

总之,file控件从默认视觉效果和交互体验方面来讲,是开发人员和普通用户都很难接受的。

道高一尺,魔高一丈

既然默认的东西我们都不能接受,那么不能接受的东西我们就要去改变它。

经过无数开发者的不断实践证明,我们不能通过改变宽度,高度,来控制file控件中按钮的尺寸,但是我们可以通过设置file控件的字体大小(font-size)来改变这个按钮的尺寸,更令人可观的是主流浏览器对改变font-size的表现是一致的。

那么,聪明的开发者们就有了应对之策了。

首先,我们从前面表现差异描述中可以发现A2、A4、A6,三处均可单击触发文件选择文件,并且这三处还有一个共同点——它们均处于控件右侧,那么我们就可以改变控件字体大小,让右侧这一部分足够大,并且只让用户看见这一区域(或部分),并且只让用户操作该区域,那么A5处交互效果不一致的问题就可以解决了。为了达到这个目的,我们可以在file控件外面包裹一层容器,并设置尺寸,通过定位将file控件右边区域显示到目标区域,并为容器设置溢出隐藏(overflow: hidden)。我还是用代码来说明吧:

<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
</div>

在浏览器中查看上面代码的效果,显然Chrome、Firefox、IE下显示效果明显太不一样了(其实文字被放大挤出可见区域了,几乎啥都看不到),那么怎么应对呢?所谓“道高一尺,魔高一丈”,这里简单的原理就是让file控件处于较高的层(z-index),并且设置透明(opacity,低版本IE用filter),让后面的元素来设置样式,以此达到视觉风格统一。说得不是很明白,还是直接上代码吧:

<style>
    .file-group {
        position: relative;
        width: 200px;
        height: 80px;
        border: 1px solid #ccc; /* 为了显示可见区域,非必须 */
        overflow: hidden;
        cursor: pointer;
        line-height: 80px;
        font-size: 16px;
        text-align: center;
        color: #fff;
        background-color: #f50;
        border-radius: 4px;
    }
    .file-group input {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 300px;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
    }
    .file-group:hover {
        background-color: #f60;
    }
</style>
<div class="file-group">
    <input type="file" name="" id="J_File">
    选择文件
</div>

最后我们再看下各浏览器表现一致的最终显示效果及交互体验:

Select file

OK,到这里我们算是对file控件有个简单的认识了,后面我还会提供更多file控件或根据file控件延伸出去的相关资料,有兴趣的朋友可以持续关注。

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
File杂谈——拖拽异步上传实现

在前一篇文章《File杂谈——拖拽上传前传》中我制作了一个静态的拖拽上传界面,拖拽文件到显示区域释放,可以显示拖入文件的基本信息。本文将在此基础上进一步加工,打造一个完整的拖拽上传示...

Mr.Zheng
2015/07/02
0
0
Swift4.0学习笔记(一)——初识Xcode

前言 最近,由于工作上的原因,我需要对ios开发有一定的了解,前期目标能够读懂swift基本的语法,能够使用各种控件实现基本的ui布局,能够帮助小伙伴解决一些bug。为什么我要写这一系列的文章...

古川不爱笑
2017/12/19
0
0
介绍几种方法将Excel格式的文件导入到JTable中

How to import Excel file into JTable Here are three way to do this. Use "JTableReadTableModelTask " to do this. ( recommended ) Use "ReadTableModelTask" to do this Use ModelIO t......

fralepg
2009/02/21
492
0
从实战中学前端:打造自己的html5文件上传插件

写在前面的废话:文件上传在web开发当中非常普遍,比如新闻图片、用户头像、商品图片等等,在html5几乎占据统治地位(但是依然有部分顽固派人士)的情况下,基于html5的文件上传也占了多数(...

有力量的神经病
2016/12/17
42
0
Intellej idea 入门学习

编程领域技术快速发展,2年前刚开始学习JAVA时主流的IDE绝对是eclipse,没想到才2年功夫,eclipse的使用率就被intelliej idea 一举超越。在师兄的鼓励下,开始进行idea的学习使用。 1.初识i...

shenwc931205
2016/12/09
34
0

没有更多内容

加载失败,请刷新页面

加载更多

matlab-线性代数 简单方程组求根(有唯一解) 非齐次线性方程组:常数项不全为零

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclc% 2x+......

志成就
27分钟前
1
0
Ubuntu 时间同步配置备忘

缘起 目前使用的 Ubuntu 18 下经常出现时间错误,查了下是默认读取 NTP 服务器的时候出现了 timeout,几次手工修改后一重启就故态复萌了,至于这个问题应该是怪机房还是 GFW,就不清楚了。 ...

郁也风
48分钟前
0
0
计算最佳线程数

计算出应该用于应用程序的理论最佳线程数有助于我们的程序的性能,应用程序运行时特征主要有CPU密集型工作和主要等待IO两种特征,或者是混合一起。 CPU 任务 threads = number of CPUs + 1 在...

woshixin
今天
3
0
搜索引擎(Solr-索引详解2)

学习目标 1.掌握SolrJ的使用。 2.掌握索引API 3.掌握结构化数据导入DIH SolrJ介绍 SolrJ是什么? Solr提供的用于JAVA应用中访问solr服务API的客户端jar。在我们的应用中引入solrj: <depende...

这很耳东先生
今天
3
0
待整理完--分享如何一个月在阿里云账户多了700元

服务器领券地址

吴伟祥
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部