菜单

用jQuery File Upload做的上传控件demo,补助同页面多个上传按钮,jquerydemo

2019年3月22日 - 皇家前端

论怎么着在二弟大端web前端完成自定义原生控件的体裁

2015/10/30 · HTML5 ·
原生控件

原稿出处:
卖烧烤夫斯基   

手提式有线电电话机支付webapp的同窗肯定蒙受过那样难题,怎么样为丑极了的无绳电电话机成分运用自定义的体制。首先,要弄明白为何要定义手提式有线电话机原生控件的体裁,就必要探视手提式无线话机的那四个原生框样式的丑陋摸样:

android:

澳门皇家赌场 1

ios:

澳门皇家赌场 2

  顾名思义,这一个插件正是有益的发出负有tab选项卡功效“盒子”的。看图一下就知道
澳门皇家赌场 3
那般效果在网页上是分外肠炎宁个的,不论前台后台。

  在那,小编首先提供了贰个参数用于自定义插件,

JS部分

基本的upload直接那样就能够了,

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

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

澳门皇家赌场 4

 

接下去要处理的是上传进程

因此计算上传的百分比设置bar的拉长率就足以了

此地运用的是放到的progressall的不二法门,传递三个参数,第③个是e正是sender,通过她找到触发的input,然后再用jquery去找其余的兄弟成分举办操作,那里是找到了progress和bar然后设置他们的上升幅度

第①个参数是data,里面包涵三个放置的变量,一个是total,三个是loaded,所以就能够计算出百分比了

澳门皇家赌场 5

 

上传完结后展现文件名,还有给隐藏input赋值,

使用的是松开的函数done,done会提供贰个参数,第二个是e就是sender,我们透过她找到相应的input,然后找到此外因素进行操作

另二个参数就是result,在诠释里早就认证了result怎样使用了

澳门皇家赌场 6

 

所以最后的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 供给有这么四个要求,3个form有多少个文件要上传,但又不是价值观的…

涸泽而渔办法

难点来了,既想要弹出层的炫酷效果,又想自定义控件在界面呈现的体裁。如何是好吧?露珠曾经尝试过最简便的点子去重写css去改变它们的体制,但是固然在google若干钟头,也不曾找到如意的结果。露珠也尝试过-webkit-appearance属性,但它也显得不顺遂。况且大家还亟需优秀多机型(安卓,苹果,wp?)。无论怎样,走改变原有样式的路是低效的。露珠经过一番想想,找到了自认为格外好的化解办法,也是这篇博文的主旨:既然控件在页面包车型大巴样式不能够改变,这就暗藏它,可是!不是用display:none隐藏,也不是把width和height设置为0,大家希望的是看不到它们的原来样式,而期望保留对它们的tap和focus事件。可是除了以上的法门,还有何样能使它们看不见呢?聪明的你势必想到了,对,就是opacit:0,
通过将控件的不发光度设置为0,大家得以让要素继续让它留在界面上,并且保持随时响应focus事件的情形。大家要做的,是为该控件设置为相对定位,覆盖在大家自定义样式的一个element上。那样,用户看到的是上边的element,但当她的手去触碰此element时,他骨子里触碰的是一点一滴透鲜明留在界面上的原生控件!如下图所示:

澳门皇家赌场 7

这照旧首先步,接下去我们要求为控件绑定响应事件,大多数景色下我们须求绑定的事件都以onchange,一旦采纳成功,就把值复制到自定义的element上去。那样马到功成了!不管你是透过表单或许post提交,你取到的值依旧是控件的值,自定义的element只担负展现,不担负作业!

澳门皇家赌场 8

$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : “tabBox/”
};

width和height定义“盒子”的上涨幅度和可观,basePath用于定义使用插件的页面对插件文件夹的相对路径。那几个选项的出现时不得已而为之,因为选项卡的样式中用到了图片,而必须要有多个规则路径才能正确找到图片的门路。那也是参考了一个叫jqtransform(

最简运维时

官网下载的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下才供给的,最终二个文书是重点

 

万般无奈的选项

看完了那么些难看的界面元素,大家就能够明白当大家把他们暴光在成品同学的眼中时,那种层层的杀气了。能够看到,界面成分十三分丑陋,产品兄弟是毫无疑问不会承受的。不过,不得不说那一个控件在触发后的遵守比pc机上的要炫酷。那里面以apple机的滚筒选用最佳非凡.以下是它们触发后调用原生控件的效用:

android:

澳门皇家赌场 9澳门皇家赌场 10澳门皇家赌场 11

ios:

澳门皇家赌场 12澳门皇家赌场 13澳门皇家赌场 14

唯其如此说这一个样式原生弹出样式是顺应大家设计的规范的,因为它即反映了UI界面包车型大巴友好和体验度,又不损耗任何web品质,关键是我们怎么都不须求做。产品BZJ君看到了,指明要在apple机下要滚筒的效应用来摘取日期也许下来单。如若大家无法化解掉界面文本框的体制难点,那么不论是后边的意义多炫酷,始终使不大概令人接受的。可能你会想花时间写类似的机能?作者不否认你能够写出来,不过须求多少日子的工作量吗?也很几个人选取了插件的艺术。通过jq插件(借使您的档次中没在选择jq,为了这一个效应无奈下载jq和其插件)来促成,其实是可怜吃力不讨好的政工。二个是插件那种事物出了难题要么更换了急需后它会变得尤其的不佳扩张,第四个自然是考虑到财富加载,在手提式有线电话机端越发须求考虑。由此,选拔插件是下下策!

可以看到那些函数全都以设置样式的代码,(也让自家感受了须臾间用jq设置css的快感,依然记念e.style.backgroud的权且~),那一个函数保障了体现当前被激活的竹签和对应的音信。其余,通过捕捉tab选项卡的click事件来改变近来的激活标签,再渲染一回就能够了。

  顾名思义,这些插件正是有益的发出负有tab选项卡功用“盒子”的。看图一下就精通
澳门皇家赌场 15
那样效果在网页上是格外肠炎宁个的,不论前台后台。

需求

有那样四个须要,2个form有多少个公文要上传,但又不是古板的图纸批量上传那种,是近乎下图那种必要,一开头是用的swfupload做的上传,可是难题是如果有多个按钮的话,就要写过多双重的代码,于为了代码的简单所以就起来寻求别的的不二法门,时期试过uploadify,但是由于体制始终调不出来,最后就摒弃了,直到发现这么个精美的钱物,jQuery
File Upload。

 

本文蕴含了upload的js达成,html的剖析,css的落到实处等剧情,文章最后有git地址

澳门皇家赌场 16

 

代码达成

XHTML

<html> <head> <style> body{ position: relative; }
.front { position: absolute; opacity: 0; height: 30px; width: 180px; }
.back { height: 30px; width: 386px; border: 1px dashed #19a39e;
line-height: 30px; text-align: center; font-size: 11px; } </style>
</head> <body> <input type=”date”
onchange=”document.getElementsByClassName(‘back’)[0].innerHTML =
this.value;”> <div
class=”back”>笔者是自定义element,作者上边覆盖着一层看不见的input</div>
</body> </html>

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
<html>
   <head>
       <style>
           body{
               position: relative;
           }
           .front {
               position: absolute;
               opacity: 0;
               height: 30px;
               width: 180px;
           }
           .back {
                height: 30px;
                width: 386px;
                border: 1px dashed #19a39e;
                line-height: 30px;
                text-align: center;
                font-size: 11px;
           }
       </style>
   </head>
    <body>
        <input type="date" onchange="document.getElementsByClassName(‘back’)[0].innerHTML = this.value;">
        <div class="back">我是自定义element,我上面覆盖着一层看不见的input</div>
    </body>
</html>

 

写完之后的一些合计:

复制代码 代码如下:

预览效果

澳门皇家赌场 17

最终的功力如上海体育场地所示,为了兑现这么些大家一步一步来分析。

 

结束语

产品B君看到了猥琐的东西没有了,ios下的滚筒又炫酷滚起来了,肯定会拍拍你的肩膀说兄弟干得科学。那篇博文也不仅仅是关于消除控件样式的难题,在此外类似的场合下,用遮罩层的点子掩盖你不能的地方是值得借鉴的。其实在开发中类似的的小花招很多,只要找到了门槛和方法,一行代码抵得上30000行代码(借用梁左的随笔名)。尽管是个不大的小花招,大篇幅的用一篇博客来讲学是矫枉过正夸大其辞和麻烦,然而前端开发事无巨细,希望对蒙受类似题材依然以往亟需缓解的校友有帮扶。

1 赞 收藏
评论

澳门皇家赌场 18

width和height定义“盒子”的增长幅度和惊人,basePath用于定义使用插件的页面对插件文件夹的相对路径。那么些选项的出现时不得已而为之,因为选项卡的体裁中用到了图片,而必须要有三个条件路径才能科学找到图片的路径。那也是参考了一个叫jqtransform()的插件的做法,他也有个参数用于钦定图片文件夹所在的职位。当然还有一种做法,便是想WebUI(澳门皇家赌场,)一样,样式写到css文件里,那样图片的引用正是先对与css文件的不二法门了,而那四个都以插件的组成都部队分,相对路劲是不变的。所以不要提供这么些路子了。只是出于那么些插件用到的样式相比较少,所以没有利用那几个点子。

$.fn.tabBox.defaults = {
width : 260,
height : 200,
basePath : “tabBox/”
};

后台代码

新建八个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");
            }
        }

 

 

相关文章

发表评论

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

网站地图xml地图