当我们需要在网页中实现文件上传功能的时候
分类:前端科技

File杂谈——初识file控件

2015/07/23 · HTML5 · file控件

原稿出处: 百码山庄   

第一本人表达下,这里介绍的file控件指的是网页中的FileUpload对象,相当于大家分布的<input type=”file”> 。假设您不是想寻找那上头的事物,即可绕道了。

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

功能

当大家供给在网页中完结文件上传功效的时候,file控件就能够大显身手了。HTML文档中每增加几个 <input type=”file”> ,实际就是创办了三个FileUpload实例对象。客户能够经过点击file控件选取当麻芋果件,当大家提交包涵该file控件的表单时,浏览器会向服务器发送客户选中的地点文件。进而将地面文件传输到服务器,供别的网络顾客下载或行使,实现公文上传效用。

美中相差

未可厚非,file控件很庞大,给网页上传文件带来了巨大的有益。但是,它并非全盘!

率先,从控件本人来说,我们能够透过value属性获取到顾客挑选的文件名称,但鉴于安全性等要素思索,该属性不可能钦命暗中认可值,并且该属性为只读属性。

补助,可能也是file控件令众多开采者发烧的地点。file控件在每种主流浏览器之间的突显大有距离,给顾客带来的视觉感受不尽一样,并且大概不或许因而一贯改换样式来达到统一,上面笔者用一张图来更清楚的告知大家:

图片 1

看清了呢?更可恨的是“选取文件”、“Browse…”、“浏览…”三处文字均不能够改观!!然则,这唯有是视觉上的差异,差别浏览器下file控件的一言一行也存在有的异样:

  • A1、A2、A3、沃兰多、A6,五处大家均可以单击触发文件选用
  • A5 处我们却供给双击技术接触文件接纳

总的说来,file控件从暗中认可视觉效果和相互体验方面来说,是开辟人士和普通客商都很难接受的。

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

既是暗中认可的事物大家都不可能经受,那么无法经受的东西大家就要去退换它。

通过多数开采者的穿梭试行注明,大家不可能经过变越来越宽度,中度,来支配file控件中开关的尺码,然而大家得以由此设置file控件的字体大小(font-size)来改造那几个按键的尺码,更令人可观的是主流浏览器对转移font-size的表现是一模二样的。

那便是说,聪明的开荒者们就有了答复之策了。

率先,大家从前方表现差异描述中能够窥见A2、LIVINA、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

本文由网上正规真人赌钱网站发布于前端科技,转载请注明出处:当我们需要在网页中实现文件上传功能的时候

上一篇:一种是从资源库中导入 下一篇:没有了
猜你喜欢
热门排行
精彩图文