file文件上传样式,使用透明效果来自定义文件上传按钮控件样式

by admin on 2019年1月31日

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文件上传样式,使用透明效果来自定义文件上传按钮控件样式。    }
    .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: #必发88,f60;
    }
</style>
<div class=”file-group”>
file文件上传样式,使用透明效果来自定义文件上传按钮控件样式。    <input type=”file” name=”” id=”J_File”>
    接纳文件
</div>

upload…

upload…

功能

当大家需求在网页中落成公文上传作用的时候,file控件就足以大显身手了。HTML文档中每添加一个 <input type=”file”> ,实际就是创立了一个FileUpload实例对象。用户可以透过点击file控件选用地面文件,当大家付出包罗该file控件的表单时,浏览器会向服务器发送用户选中的本土文件。从而将当地文件传输到服务器,供其余互联网用户下载或选取,已毕公文上传功效。

上传

上传

美中不足

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

第一,从控件本身而言,大家得以由此value属性获取到用户挑选的文件名称,但鉴于安全性等元素考虑,该属性无法指定默许值,并且该属性为只读属性。

说不上,恐怕也是file控件令许多开发者胃痛的地点。file控件在相继主流浏览器之间的突显大有差别,给用户带来的视觉感受相形见绌,而且大约不能通过直接修改样式来达到统一,上面我用一张图来更清晰的告诉大家:

必发88 1

侦破了啊?更可恶的是“选用文件”、“Browse…”、“浏览…”三处文字均无法改观!!然则,那只是是视觉上的差异,分裂浏览器下file控件的表现也存在有的出入:

  • A1、A2、A3、A4、A6,五处大家均可以单击触发文件选拔
  • A5 处大家却必要双击才能接触文件选用

一言以蔽之,file控件从默许视觉效果和相互体验方面来讲,是开发人士和普通用户都很难接受的。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能举办]

[Ctrl+A 全选
注:如需引入外部Js需刷新才能执行]

道高一尺,魔高一丈

既然如此默许的东西我们都不可以接受,那么不能够承受的事物大家就要去改变它。

经过广大开发者的不断实践讲明,大家不可以透过改动宽度,高度,来控制file控件中按钮的尺码,不过大家可以通过设置file控件的字体大小(font-size)来改变这几个按钮的尺码,更令人可观的是主流浏览器对转移font-size的突显是一律的。

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

首先,我们以前方表现差别描述中得以窥见A2、A4、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>

说到底大家再看下各浏览器表现同样的末段突显效果及互相体验:

必发88 2

OK,到这里我们毕竟对file控件有个简单的认识了,前边我还会提供越来越多file控件或按照file控件延伸出来的连带材料,有趣味的朋友可以不断关心。

1 赞 3 收藏
评论

必发88 3

1、在相比较旧的浏览器中(比如IE9及以下,不辅助 fileAPI,不支持XMLHttprequest level2 只可以用表单post文件)上传图片时,只可以利用 表单
post,处于安全上的设想,input[type=”file”]
的文件选取按钮样式并不可以随便改动(不过可以修改input
的透明度),可能会跟设计师的筹划格格不入,那时可以选取透明效果来自定义上传按钮。
2、控件宽度最好不要超越60px,因为file控件浏览按钮的涨幅不可以修改,在firefox下约为60px。如若过量60px,不要设置控件的鼠标样式,由于firefox下file控件的鼠标样式只在浏览按钮上生效,借使设置鼠标样式会促成控件左侧和左侧样式差异。
3、控件文字突显层的行高与控件容器层的莫大保持一致以管教文字垂直居中。
4、由于安全性难点,文件上传控件必须利用鼠标点击浏览按钮弹出文件选拔窗并选用文件,才能向服务器上传文件(不辅助file API ),通过js触发file控件的click()
事件来弹出文件选拔窗然后选用文件的艺术是力不从心上传文件的,由此必须使file控件覆盖在文字突显层上边,将file控件样式设置为透明来显示上面的文字层。
5、xmlhttprequest组件(level1 , level
2已经支撑二进制数据上传和跨域)是不能上传文件的,异步上传文件要求动用
iframe 引入上传控件使用 表单 post
数据,可以把文件上传效能单独放在iframe内落成,也得以只是把拍卖图片上传的服务器脚本指定在iframe内开辟
(设置form表单的 target 指向 iframe 窗口)。

1、在相比旧的浏览器中(比如IE9及以下,不援救 fileAPI,不协理XMLHttprequest level2 只可以用表单post文件)上传图片时,只可以动用 表单
post,处于安全上的考虑,input[type=”file”]
的文书拔取按钮样式并不可能随随便便修改(不过可以修改input
的透明度),可能会跟设计师的统筹格格不入,这时可以使用透明效果来自定义上传按钮。
2、控件宽度最好不用跨越60px,因为file控件浏览按钮的肥瘦无法修改,在firefox下约为60px。假如过量60px,不要设置控件的鼠标样式,由于firefox下file控件的鼠标样式只在浏览按钮上生效,如若设置鼠标样式会造成控件左边和左侧样式不一样。
3、控件文字突显层的行高与控件容器层的可观保持一致以保险文字垂直居中。
4、由于安全性问题,文件上传控件必须运用鼠标点击浏览按钮弹出文件选拔窗并采纳文件,才能向服务器上传文件(不支持file API ),通过js触发file控件的click()
事件来弹出文件拔取窗然后选用文件的格局是无能为力上传文件的,因而必须使file控件覆盖在文字突显层上面,将file控件样式设置为透明来突显上面的文字层。
5、xmlhttprequest组件(level1 , level
2已经支撑二进制数据上传和跨域)是无能为力上传文件的,异步上传文件须求利用
iframe 引入上传控件使用 表单 post
数据,可以把文件上传效率单独放在iframe内达成,也可以只是把拍卖图片上传的服务器脚本指定在iframe内开辟
(设置form表单的 target 指向 iframe 窗口)。

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
>
<title>upload…</title>
<style>
#ui-upload-holder{ position:relative;width:60px;height:35px;border:1px
solid silver; overflow:hidden;}
#ui-upload-input{
position:absolute;top:0px;right:0px;height:100%;cursor:pointer;
opacity:0;filter:alpha(opacity:0);z-index:999;}
#ui-upload-txt{
position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;}
#ui-upload-filepath{ position:relative; border:1px solid silver;
width:150px; height:35px; overflow:hidden; float:left;}
#ui-upload-filepathtxt{ position:absolute; top:0px;left:0px;
width:100%;height:35px; border:0px; line-height:35px; }
.uploadlay{margin:200px; border:1px green solid; width:300px;
height:200px; padding:10px; }
</style>
</head>
<body>
<div class=”uploadlay”>
<div id=”ui-upload-filepath”>
<input type=”text” id=”ui-upload-filepathtxt” class=”filepathtxt”
/>
</div>
<div id=”ui-upload-holder” >
<div id=”ui-upload-txt”>上传</div>
<input type=”file” id=”ui-upload-input” name=”myfile” />
</div>
</div>
<script>
document.getElementById(“ui-upload-input”).onchange=function(){
document.getElementById(“ui-upload-filepathtxt”).value = this.value;
}
</script>
</body>
</html>

<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″
>
<title>upload…</title>
<style>
#ui-upload-holder{ position:relative;width:60px;height:35px;border:1px
solid silver; overflow:hidden;}
#ui-upload-input{
position:absolute;top:0px;right:0px;height:100%;cursor:pointer;
opacity:0;filter:alpha(opacity:0);z-index:999;}
#ui-upload-txt{
position:absolute;top:0px;left:0px;width:100%;height:100%;line-height:35px;text-align:center;}
#ui-upload-filepath{ position:relative; border:1px solid silver;
width:150px; height:35px; overflow:hidden; float:left;}
#ui-upload-filepathtxt{ position:absolute; top:0px;left:0px;
width:100%;height:35px; border:0px; line-height:35px; }
.uploadlay{margin:200px; border:1px green solid; width:300px;
height:200px; padding:10px; }
</style>
</head>
<body>
<div class=”uploadlay”>
<div id=”ui-upload-filepath”>
<input type=”text” id=”ui-upload-filepathtxt” class=”filepathtxt”
/>
</div>
<div id=”ui-upload-holder” >
<div id=”ui-upload-txt”>上传</div>
<input type=”file” id=”ui-upload-input” name=”myfile” />
</div>
</div>
<script>
document.getElementById(“ui-upload-input”).onchange=function(){
document.getElementById(“ui-upload-filepathtxt”).value = this.value;
}
</script>
</body>
</html>

… 上传 [Ctrl+A 全选
注:如需引入外部Js需刷新才能履行]
1、在可比旧的浏览器中(比如IE9及以下,不帮衬 fileAPI,不协理XMLHttprequest level…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图