file文件上传样式

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控件的表单时,浏览器会向服务器发送顾客选中的当三步跳件。进而将当麻芋果件传输到服务器,供别的互连网客户下载或行使,达成文件上传功效。

发表评论

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