新闻资讯

当前位置:新萄京娱乐场手机版 > 新闻资讯 > 当我们需要在网页中实现文件上传功能的时候

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

来源:http://www.chrisproduction.com 作者:新萄京娱乐场手机版 时间:2019-10-05 16:46

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

本文由新萄京娱乐场手机版发布于新闻资讯,转载请注明出处:当我们需要在网页中实现文件上传功能的时候

关键词:

上一篇:没有了

下一篇:没有了