当我们需要在网页中实现文件上传功能的时候

File杂谈——初识file控件

2015/07/23 · HTML5 ·
file控件

原来的文章出处: 百码山庄   

首先自个儿表明下,这里介绍的file控件指的是网页中的FileUpload对象,也正是我们广阔的<input type=”file”> 。假如您不是想搜寻那方面包车型客车事物,就能够绕道了。

功能

当大家须求在网页中落到实处文件上传成效的时候,file控件就足以大显身手了。HTML文书档案中每增多贰个 <input type=”file”> ,实际就是创办了三个FileUpload实例对象。客商能够由此点击file控件选取当和姑件,当大家付出包括该file控件的表单时,浏览器会向服务器发送客户选中的当半夏件。进而将地点文件传输到服务器,供其余网络客商下载或选取,完结公文上传成效。

美中不足

未有可过分喝斥,file控件很有力,给网页上传文件带来了偌大的造福。可是,它不用全盘!

首先,从控件自身来说,大家得以经过value属性获取到客商挑选的文件名称,但由于安全性等因素思念,该属性不能钦点暗许值,並且该属性为只读属性。

其次,也许也是file控件令广大开采者脑瓜疼的地方。file控件在千家万户主流浏览器之间的展现大有反差,给客户带来的视觉感受大有径庭,而且大概不容许通过直接修改样式来达成统一,下边作者用一张图来更清晰的告诉咱们:

图片 1

侦查破案了啊?更可恶的是“选拔文件”、“Browse…”、“浏览…”三处文字均不可能转移!!可是,那独有是视觉上的出入,分裂浏览器下file控件的表现也设有部分数差异:

  • A1、A2、A3、Sagitar、A6,五处大家均能够单击触发文件选拔
  • A5 处大家却须要双击技巧接触文件选择

一句话来说,file控件从默许视觉效果和相互体验方面来讲,是开垦人士和普通客商都很难接受的。

道高级中学一年级尺,魔高级中学一年级丈

既然暗许的事物大家都无法承受,那么无法承受的东西大家将在去改动它。

通过大多开辟者的持续试行表明,大家不可能经过改造加宽度,中度,来调节file控件中开关的尺码,可是大家能够由此设置file控件的字体大小(font-size)来退换那些开关的尺码,更令人可观的是主流浏览器对转移font-size的表现是一模二样的。

那正是说,聪明的开拓者们就有了回复之策了。

率先,大家以前方表现差别描述中能够开采A2、亚洲龙、A6,三处均可单击触发文件选取文件,而且那三处还也许有三个共同点——它们均处在控件右边,那么我们就能够改造控件字体大小,让左侧这一有些丰硕大,并且只让客商看到这一区域(或局地),何况只让顾客操作该区域,那么A5处交互功效不雷同的主题素材就能够化解了。为了到达这么些指标,我们得以在file控件外面包裹一层容器,并安装尺寸,通过牢固将file控件侧面区域展现到目的区域,并为容器设置溢出隐蔽( overflow: hidden )。作者要么用代码来表明呢:

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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),让前边的元平昔安装样式,以此达到视觉风格统一。说得不是很清楚,照旧直接上代码吧:

XHTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>

终极大家再看下各浏览器表现同样的结尾突显效果及互动体验:

图片 2

OK,到此处大家总算对file控件有个简易的认识了,前边小编还大概会提供越多file控件或基于file控件延伸出来的有关资料,好玩味的敌人能够持续关怀。

1 赞 3 收藏
评论

图片 3

相关文章