File杂谈——初识file控件

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

功能

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

美中不足

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

首先，从控件自己而言，咱们能够经过value属性获取到用户选择的文件名称，但出于安全性等因素考虑，该属性没法指定默认值，而且该属性为只读属性。

其次，恐怕也是file控件令不少开发者头疼的地方。file控件在各个主流浏览器之间的表现大有差别，给用户带来的视觉感觉截然不同，并且几乎不可能经过直接修改样式来达到统一，下面我用一张图来更清晰的告诉你们：

一目了然了吧？更可恶的是“选择文件”、“Browse...”、“浏览...”三处文字均没法更改！！然而，这仅仅是视觉上的差别，不一样浏览器下file控件的行为也存在一些差别：

• A一、A二、A三、A四、A6，五处咱们都可以单击触发文件选择
• A5 处咱们却须要双击才能触发文件选择

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

道高一尺，魔高一丈

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

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

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

首先，咱们从前面表现差别描述中能够发现A二、A四、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>

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

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

做者博客：百码山庄