采纳透明效果来自定义文件上传按钮控件样式,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>

upload…

功能

当大家必要在网页中完毕公文上传成效的时候,file控件就足以大显身手了。HTML文档中每添加三个 <input type=”file”> ,实际便是创办了二个FileUpload实例对象。用户能够透过点击file控件采用当三步跳件,当大家付出包蕴该file控件的表单时,浏览器会向服务器发送用户选中的当半夏件。从而将当和姑件传输到服务器,供其余网络用户下载或行使,实现文件上传成效。

上传

相关文章

发表评论

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

网站地图xml地图