这里介绍的file控件指的是网页中的FileUpload对象,

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...

upload...

用jQuery File Upload做的上传控件demo,帮助同页面多少个上传开关,jquerydemo

功能

当大家须要在网页中达成文件上传功用的时候,file控件就足以大显身手了。HTML文档中每增多三个 <input type=”file”> ,实际正是创造了多少个FileUpload实例对象。客户能够通过点击file控件采纳当麻芋果件,当我们提交包括该file控件的表单时,浏览器会向服务器发送客户选中的地面文件。从而将当半夏件传输到服务器,供别的网络顾客下载或应用,达成公文上传功用。

上传

上传

需求

有那般一个需要,多个form有多少个文本要上传,但又不是古板的图纸批量上传这种,是看似下图这种供给,一同头是用的swfupload做的上传,但是难点是只要有多少个按键的话,就要写过多重复的代码,于为了代码的凝练所以就起来寻求别的的主意,时期试过uploadify,但是出于体制始终调不出来,最终就放弃了,直到开掘那样个娇小的玩意儿,jQuery File Upload。

 

本文富含了upload的js达成,html的深入分析,css的实现等剧情,文章最后有git地址

必威 1

 

本文由必威发布于必威-前端,转载请注明出处:这里介绍的file控件指的是网页中的FileUpload对象,

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。