file文件上传样式,Upload做的上传控件demo

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文件上传样式,Upload做的上传控件demo。    .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>

用jQuery File Upload做的上传控件demo,支持同页面七个上传按钮,jquerydemo

upload…

功能

当大家须要在网页中贯彻公文上传功效的时候,file控件就可以大显身手了。HTML文档中每添加一个 <input type=”file”> ,实际就是创设了一个FileUpload实例对象。用户可以由此点击file控件选用地面文件,当我们提交包涵该file控件的表单时,浏览器会向服务器发送用户选中的本土文件。从而将当地文件传输到服务器,供其余网络用户下载或利用,完成公文上传效能。

需求

有诸如此类一个必要,一个form有多少个文本要上传,但又不是传统的图纸批量上传那种,是类似下图那种须要,一开始是用的swfupload做的上传,可是问题是即使有多少个按钮的话,就要写过多重复的代码,于为了代码的精简所以就开头寻求其余的法门,时期试过uploadify,不过由于体制始终调不出去,最终就放任了,直到发现那样个娇小的实物,jQuery
File Upload。

 

本文包含了upload的js完成,html的解析,css的落实等情节,小说最终有git地址

亚洲必赢官网 1

 

上传

美中相差

无可厚非,file控件很强大,给网页上传文件带来了大幅度的便宜。然而,它并非全盘!

首先,从控件本身而言,我们得以经过value属性获取到用户选取的文件名称,但鉴于安全性等要素考虑,该属性无法指定默认值,并且该属性为只读属性。

说不上,恐怕也是file控件令广大开发者头疼的地点。file控件在依次主流浏览器之间的突显大有出入,给用户带来的视觉感受黯淡无光,而且大概不能由此一直修改样式来达到统一,上边我用一张图来更清晰的告诉我们:

亚洲必赢官网 2

吃透了吧?更可恶的是“接纳文件”、“Browse…”、“浏览…”三处文字均不可能改变!!但是,那然而是视觉上的歧异,不相同浏览器下file控件的一颦一笑也存在部分距离:

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

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

最简运行时

官网下载的demo有N多js文件,一大堆js文件中只有多少个才是必备的,其他的公文都是一些用不到的效率,唯有在你须求的时候才须求引用。

    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script src="JS/jquery/jquery.iframe-transport.js"></script>
    <script src="JS/jquery/jquery.ui.widget.js"></script>
    <script src="JS/jquery/jquery.xdr-transport.js"></script>
    <script src="JS/jquery/jquery.fileupload.js"></script>

 

其中iframe那几个文件是为着拓展iframe上传,ui文件是能选完文件自动上传的要求文件,xdr那多少个是在ie下才要求的,最终一个文书是中央

 

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

最后大家再看下各浏览器表现同样的终极展现效果及相互体验:

亚洲必赢官网 3

OK,到那边大家算是对file控件有个简易的认识了,前面我还会提供愈来愈多file控件或依据file控件延伸出来的相关资料,有趣味的情侣可以不停关心。

1 赞 3 收藏
评论

亚洲必赢官网 4

后台代码

新建一个ashx的文书,那里建立一个uploadHandler.ashx,然后写入如下代码,用于保存。

    public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Charset = "utf-8";

            HttpPostedFile file = context.Request.Files["files"];
            string uploadPath =
                HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

            if (file != null)
            {
                if (!Directory.Exists(uploadPath))
                {
                    Directory.CreateDirectory(uploadPath);
                }
                file.SaveAs(uploadPath + file.FileName);
                //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失
                string newName = file.FileName;
                string oldName = file.FileName;
                context.Response.Write("{\"newName\": \"" + newName + "\", \"oldName\": \"" + oldName + "\"}");
            }
            else
            {
                context.Response.Write("0");
            }
        }

 

 

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

复制代码 代码如下:

预览效果

亚洲必赢官网 5

终极的职能如上图所示,为了促成那个大家一步一步来分析。

 

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

DIV结构

亚洲必赢官网 6

如上图

 

上图后4个div按照顺序写在最外层里面,然后考虑通过变更来化解地点的问题,当然也足以用相对定位等办法来贯彻,那里拔取了扭转。

因为要用到变化,那里大概解释一下浮动的规律

率先设置0的升幅是280px

故而1的小幅就是70+margin-right:8 左侧还有202小幅,左浮动

2的幅度是150px,左浮动

3的大幅度不安装,右浮动

4的涨幅是200+border:2 一起202涨幅,左浮动

 

接下来再设置上传按钮,即使不设置样式,上传按钮是如此的

亚洲必赢官网 7

如此显明是老套的体制了,在网上找了一个解决方案是这么的

亚洲必赢官网 8

卓越那样的体制

亚洲必赢官网 9

就能够做出这几个职能了

亚洲必赢官网 10

由此html的代码如下:

亚洲必赢官网 11
<style> body{padding:10px} /* 上传控件 */ .upload {
margin-top:10px; width:280px; height:30px; } .upload .uploadbtnBox {
float:left; height:30px; width:70px; margin-right:8px; } .upload
.progress { height:4px; line-height:4px; *zoom:1; background:#fff;
float:left; width:200px; border:1px #ccc solid; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; display:none; } .upload
.filestate { float:left; height:20px; text-align:left; width:150px;
line-height:20px; display:none; color:#333; overflow:hidden; } .upload
.progresspercent { float:right; padding-top:5px; height:15px;
text-align:right; font-size:9px; line-height:15px; color:#333; }
.upload .uploadbtnBox .a-upload { height:28px; background:#4090c0;
border:1px solid #dddddd;color:#ffffff; line-height:28px; padding:0
6px; font-size:0.9em; overflow: hidden; display: inline-block;
text-decoration:none; *display: inline; *zoom: 1 } .upload
.uploadbtnBox .a-upload input { position: absolute; width:70px;
height:30px; overflow:hidden; margin-left:-10px; opacity: 0; filter:
alpha(opacity=0); cursor: pointer } .upload .progress .bar { height:4px;
line-height:4px; background:#4090c0; *zoom:1; } .clearfix:after {
content: “.”; display: block; height: 0; visibility: hidden; clear:
both; } .clearfix { _zoom: 1; } .clearfix { *zoom:1; } </style>
<div class=”upload clearfix”> <div class=”uploadbtnBox
clearfix”> <a href=”javascript:;” class=”a-upload”> <input
type=”file” data-url=”uploadHandler.ashx” name=”files” value=””
id=”file7″ onchange=”CheckFile(this)” />点击上传 </a>
</div> <div class=”filestate”> 文件名</div> <div
class=”progresspercent”> </div> <div class=”progress”
style=”height: 4px;”> <div class=”bar” style=”width: 0%;”>
</div> </div> </div> View Code

 

 

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

JS部分

主干的upload间接那样就可以了,

$(“input[type=file]”).fileupload();

上传的后台页面通过input的data-url来安装,如下图

亚洲必赢官网 12

 

接下去要拍卖的是上传进程

通过计算上传的比例设置bar的肥瘦就足以了

那边运用的是置于的progressall的措施,传递2个参数,第三个是e就是sender,通过她找到触发的input,然后再用jquery去找其它的哥们儿元素举办操作,那里是找到了progress和bar然后设置他们的宽窄

第三个参数是data,里面包括五个放置的变量,一个是total,一个是loaded,所以就可以总计出百分比了

亚洲必赢官网 13

 

上传完成后突显文件名,还有给隐藏input赋值,

选拔的是置于的函数done,done会提供2个参数,第三个是e就是sender,大家经过他找到呼应的input,然后找到其它因素进行操作

另一个参数就是result,在诠释里曾经证实了result怎样行使了

亚洲必赢官网 14

 

于是最终的js就是那样

    <script type="text/javascript">

        function CheckFile(obj) {
            var array = new Array('gif', 'jpeg', 'png', 'jpg');  //可以上传的文件类型  
            if (obj.value == '') {
                alert("让选择要上传的图片!");
                return false;
            }
            else {
                var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:)  
                var isExists = false;
                for (var i in array) {
                    if (fileContentType.toLowerCase() == array[i].toLowerCase()) {
                        isExists = true;
                        return true;
                    }
                }
                if (isExists == false) {
                    obj.value = null;
                    alert("上传图片类型不正确!");
                    return false;
                }
                return false;
            }
        }
        $(function () {
            $("input[type=file]").fileupload({
                done: function (e, result) {
                    //done方法就是上传完毕的回调函数,其他回调函数可以自行查看api
                    //注意result要和jquery的ajax的data参数区分,这个对象包含了整个请求信息
                    //返回的数据在result.result中,假设我们服务器返回了一个json对象
                    //json对象{"newName": "sss", "oldName": "sdf"}

                    var resultJson = $.parseJSON(result.result)
                    $(e.target).attr("value", resultJson.newName);
                    var uploadDiv = $(e.target).parent().parent().parent();
                    uploadDiv.find(".filestate").show().text(resultJson.oldName);
                },
                progressall: function (e, data) {
                    var maxWidth = 200;
                    var percent = (data.loaded / data.total * 100).toFixed(2);
                    var progress = parseInt(data.loaded / data.total * maxWidth, 10);
                    var uploadDiv = $(e.target).parent().parent().parent();
                    uploadDiv.find(".progress").show();
                    uploadDiv.find(".bar").css("width", progress);
                    uploadDiv.find(".progresspercent").show().text(percent + "%");

                }
            })
        });

    </script>

 

git地址:

File
Upload做的上传控件demo,帮助同页面多少个上传按钮,jquerydemo 需求有这么一个要求,一个form有三个文件要上传,但又不是观念的…

网站地图xml地图