您的位置:68399皇家赌场 > 服务器租用 > 依附jquery跨浏览器呈现的file上传控件

依附jquery跨浏览器呈现的file上传控件

发布时间:2019-06-29 00:32编辑:服务器租用浏览(99)

    jquery easyui日期控件中,在页面里用JS获得安装的日期值的主意

    近来作者写过一篇短小的篇章,简要的牵线了下怎么样定义input type="file" 的体制。对于一般的表单,上传控件较少,那样的做法确实无误,既收缩了代码,又美化了体制,原来的小说:《定义input type="file" 的样式》

    在前头介绍了两篇有关作者的基于MVC4 EasyUI工夫的Web开拓框架的随笔,本篇继续介绍个中分界面部分的某个施用知识,包含控件的赋值、取值、清空,以及有关的选择。

    自己后端开采码农多少个,公司前端忙的一逼,项目应用的是easyui组件,其自带的datebox组件使用起来非常难受,首要表未来

    jquery获取easyui日期控件的值

    骨子里要完结给file控件定义样式,差非常少理念都以均等的。

    大家领悟,一般Web界面包涵的分界面控件有:单行文本框、多行文本框、密码文本框、下拉列表Combobox、日期输入控件、数值输入控件、单项选拔、复选框、表格控件DataGrid、树形控件、布局控件、弹出式对话框、提示音讯、列表控件等,那么些分界面控件的操作都有怎么着差别,上边大家来所有人家实行介绍。

    1、自定义展现格式很费力

    jquery easyui 日期框

    今日收看博客园的繁花连写两篇作品来商讨file控件
    《jquery.file伊夫ryWhere.js--四个跨浏览器的file呈现插件》
    《firefox下input type="file"的size是多大》

     图片 1

    2、选拔年份和月份用户体验也不佳

    有诸如此类的贰个日期文本框:

    本人那边也迫不及待了。成果是花朵的,以下内容引用自上边两篇小说:

    1、单行文本框

    网络有关于和 My97DatePicker 结合的例证,但以为也用的不是很爽。

    <input type="text" name="mdate" size="20" value="" id="mdate" class="easyui-datebox"/> 

    大牌ppk都说过,在从多表单控件中,上传文件控件的样式是最难以调节的。见作品Styling an input type="file"。本插件也多是参照此文。

    行使easyui的控件,单行文本能够动用easyui-validatebox样式就能够,类型为text的控件。

    开采国内的layDate体验十三分令人满意,所以萌生出想把那五个零件组合起来的主张,具体代码如下,本身非前端,所以只是达成了基本功用,大神勿喷哦。

    应用easyui给文本框选定日期值,然后,要在JS中获得此日期框中的新颖值。

    先来探视input type="file"在chrome,ie,firefox那三个浏览器下表情各异吧。

    图片 2

    easyUI版本:V1.5.2

    自然以为这是叁个简练的主题材料,直接

    图片 3
    图片 4
    图片 5

    分界面代码如下所示:

    layDate版本:V5.0

    var dv = $('#mdate').val(); 

    chrome像是button label组合,看起差别最大。

    复制代码 代码如下:

    /*
    基于laydate日期扩展组件
    */
    (function ($) {
      function createBox(target) {
        var state = $.data(target, 'laydate');
        var opts = state.options;
        $(target).addClass('datebox-f').textbox($.extend({}, opts, {
          editable: false,
          icons: [{ iconCls: 'combo-arrow' }]
        }));
        $(target).next("span.textbox").addClass('datebox');
        laydate.render({
          elem: '#'   $(target).next("span.textbox").children(":text").attr("id"), //指定元素,
          format: opts.format,
          type: opts.datetype,
          min: opts.min,
          max: opts.max,
          zIndex :opts.zIndex ,
          range :opts.range ,
          theme: opts.theme,
          calendar: opts.calendar,
          mark: opts.mark,
          done: function (value, date, endDate) {
            $(target).textbox('setValue', value);
            opts.onSelect.call(target, value, date, endDate);
          },
          change: function(value, date, endDate) {
            opts.onChange.call(target, value, date, endDate);
          }
        });
      }
      $.parser.plugins.push("laydate");//注册扩展组件
      $.fn.laydate = function (options, param) {
        if (typeof options == 'string') {
          var method = $.fn.laydate.methods[options];
          if (method) {
            return method(this, param);
          } else {
            return this.textbox(options, param);
          }
        }
        options = options || {};
        return this.each(function () {
          var state = $.data(this, 'laydate');
          if (state) {
            $.extend(state.options, options);
          } else {
            $.data(this, 'laydate', {
              options: $.extend({}, $.fn.laydate.defaults, $.fn.laydate.parseOptions(this), options)
            });
          }
          createBox(this);
        });
      };
      $.fn.laydate.methods = {
        options: function (jq) {
          var copts = jq.textbox('options');
          return $.extend($.data(jq[0], 'laydate').options, {
            width: copts.width,
            height: copts.height,
            originalValue: copts.originalValue,
            disabled: copts.disabled,
            readonly: copts.readonly
          });
        }
      };
      $.fn.laydate.parseOptions = function (target) {
        return $.extend({}, $.fn.textbox.parseOptions(target));
      };
      $.fn.laydate.defaults = $.extend({}, $.fn.textbox.defaults,
        {
          //laydate 参数说明:http://www.layui.com/doc/modules/laydate.html#type
          theme: "#0099cc",
          datetype: "date",//控件选择类型 year month date time datetime
          range: false,//开启左右面板范围选择 或 range: '~' 来自定义分割字符
    
          //最小/大范围内的日期时间值 
          //如果值为字符类型,则:年月日必须用 -(中划线)分割、时分秒必须用 :(半角冒号)号分割。这里并非遵循 format 设定的格式
          //如果值为整数类型,且数字<86400000,则数字代表天数,如:min: -7,即代表最小日期在7天前,正数代表若干天后
          //如果值为整数类型,且数字 ≥ 86400000,则数字代表时间戳,如:max: 4073558400000,即代表最大日期在:公元3000年1月1日
          min: '1900-1-1',
          max: '2099-12-31',
    
          format: "yyyy-MM-dd",//自定义格式
          zIndex: 66666666,//层叠顺序
          calendar: false,//是否显示公历节日
    
          //标注重要日子
          //每年的日期 {'0-9-18': '国耻'} 0 即代表每一年
          //每月的日期 {'0-0-15': '中旬'} 0-0 即代表每年每月(layui 2.1.1/layDate 5.0.4 新增)
          //特定的日期 {'2017-8-21': '发布')
          mark: {},
          onSelect: function (value, date, endDate) { },
          onChange: function (value, date, endDate) { }
        });
    
    })(jQuery);
    

    不就OK了呢。但大失所望,获得的竟是是空,如果自己在后台给那些文件框赋初值,则不管你再选任何值,获得的也照旧十分初值。

    ff和ie,是text button的组成,就外形来看,firefox更标准,事实上firefox存在四个神秘难题:
    1,firefox对type="file" 的input的width定义近年来是不扶助的(不过FF帮助size属性,能够给size设置八个值,来调节上传框的大小,至于那一个size到底是多大,见小说繁花-firefox下input type="file"的size是多大)。
    2,火狐浏览器的交给file表单时只交付文件名不提交路线,而IE提交的是路径 文件名,chrome也能交付路线 文件名,但只展现文件名。火狐浏览器的提交file表单时只交给文件名不提交路线(很不满,暂时并没有化解办法)

    <input class="easyui-validatebox" type="text" id="Name" name="Name" />

    选用方法一:

    焚薮而田措施,使用easyui自身的函数来拿,就能够获得了:

    要让file在相继浏览器突显统一,纯样式已经调整不了,只好用js脚本了。基本步骤有3:
    1,通过文本框和按键去模拟贰个input type=”file”。
    2,把input="file"做成透明,用定位完全盖住文本框和开关。
    3,当input type=”file”的onchange的时,用js将文本框的值设置成input type=”file”的值。

    或者

    <input name="BYXX" type="text" id="BYXX" class="easyui-laydate" data-options="width:200,datetype:'month'" />
    

    var dv = $('#mdate').datebox('getValue'); 

    叩问步骤后,整个插件就很好写了,代码如下:

    复制代码 代码如下:

    采用办法二:

    原因正是,easyui此外增添了贰个隐身的input表单,它把值赋到非常里面去了,但照旧很古怪的是,提交表单时,名称为mdate的那一个表单提交过去的只怕不错的值,嫌疑是交给前做了什么动作,动态地给原来的表单赋了值。未有细心钻探。

    复制代码 代码如下:

    <input type="text" ID="txtLoginName" name="txtLoginName" style="width:100px"  />

    <input type="text" id="BYXX" />
      <script type="text/javascript">
        $(function () {
          $("#BYXX").laydate({ width: 200, datetype: 'month' });
        });
      </script>
    

    上述这篇jquery获取easyui日期控件的值完毕方式正是作者分享给大家的全体内容了,希望能给我们多个参照他事他说加以考察,也期望大家多多援助脚本之家。

    /*
    * file everywhere - 浏览器通用文件上传
    * copyright->flowerszhong
    * flowerszhong@gmail.com
    *
    */
    (function($) {
    $.fn.fileEveryWhere = function(options) {
    var defaults = {
    WrapWidth: 300,
    WrapHeight: 30,
    ButtonWidth: 60,
    ButtonHeight: 28,
    ButtonText: "浏览",
    TextHeight: 28,
    TextWidth: 240
    };
    var options = $.extend(defaults, options);
    var browser_ver = $.browser.version.substr(0, 1);
    var displayMode = ($.browser.msie && browser_ver <= "7") ? "inline" : "inline-block";
    return this.each(function() {
    //创造包括,设置为绝对固化
    var wrapper = $("<div class='fileWraper'>")
    .css({
    "width": options.WrapWidth "px",
    "height": options.WrapHeight "px",
    "display": displayMode,
    "zoom": "1",
    "position": "relative",
    "overflow": "hidden",
    "z-index":"1"
    });
    //成立文本输入框,用于存放上传文件名称
    var text = $('<input class="filename" type="text" />')
    .css({
    "width": options.TextWidth "px",
    "heigth": options.TextHeight "px"
    });
    //创立浏览开关
    var button = $('<input class="btnfile" type="button" />')
    .val(options.ButtonText);
    $(this).wrap(wrapper).parent().append(text, button);
    $(this).css({
    "position": "absolute",
    "top": "0",
    "left": "0",
    "z-index": "2",
    "height": options.WrapHeight "px",
    "width": options.WrapWidth "px",
    "cursor": "pointer",
    "opacity": "0.0",
    "outline":"0",
    "filter": "alpha(opacity:0)"
    });
    if ($.browser.mozilla) { $(this).attr("size", 1 (options.WrapWidth - 85) / 6.5) }
    $(this).bind("change", function() {
    text.val($(this).val());
    });
    });
    };
    })(jQuery);

    赋值给分界面控件代码如下:

    别忘记引用jquery、easyui和laydate的js文件了啊

    您只怕感兴趣的文章:

    • JQuery EasyUI 日期控件怎么着调整日期选择距离
    • 浅谈jQuery.easyui的datebox格式化时间
    • jQuery EasyUI中的日期控件DateBox修改章程

    选取很轻易:

    复制代码 代码如下:

    如上便是本文的全体内容,希望对大家的读书抱有帮衬,也希望大家多多协助脚本之家。

    $("input:file").fileEveryWhere({参数});

    $("#Name").val(info.Name);

    你也许感兴趣的篇章:

    • 缓和easyui日期时间框ie的相配的标题
    • jQueryeasyui 中怎么着使用datetimebox 取四个日之间相隔的气数
    • EasyUI Datebox 日期验证之初叶日期小于结束时间
    • EasyUI修改DateBox和DateTime博克斯的暗中认可日期格式示例
    • easyui datebox 时间范围,datebox伊始时间限定甘休时间,datebox停止日期比开端日期大的贯彻代码
    • jQuery EasyUI中的日期控件DateBox修改章程
    • jquery获取easyui日期控件的值完毕格局
    • JQuery EasyUI 日期控件怎么样调控日期选拔距离
    • jQuery EasyUI API 中文文书档案Date提姆eBox日期时间框
    • jQuery EasyUI API 中文文档 - Date博克斯日期框

    firefox对type="file" 的input的width定义近日是不辅助的,不过FF协助size属性,能够给size设置三个值,来决定上传框的大小。
    而是那几个size值怎么设置,size="10"是多少宽度,私下认可值又是稍微,不能够光凭感到去设置。 用脚本来查看下:

    赢得界面控件的值代码如下:

    复制代码 代码如下:

    复制代码 代码如下:

    <script type="text/javascript">
    $(function() {
    var fileArray = [];
    var i = 0;
    while (i < 100) {
    fileArray.push(i ":<input type='file' size='" i "' /><br />");
    i ;
    }
    document.write(fileArray.join(""));
    $("input:file").each(function() { $(this).after("<b>" $(this).width() "</b>") });
    });
    </script>

    var name = $("#Name").val();

    在火狐下得到这么的结果:
    图片 6

    举例是标签Lable控件,那亟需把val 使用text代替就能够,如下代码所示:

    意识了一定的原理,默感觉208像素,size="1"时为85像素,每一种size之间距离6.5个像素的增长幅度,所以大家能够动态的设定size的值,如:

    复制代码 代码如下:

    复制代码 代码如下:

    $("#Name").text(info.Name);

    if ($.browser.mozilla) { $(this).attr("size", 1 (options.WrapWidth - 85) / 6.5)

     对于easyui-validatebox样式的控件,一般的话,有几个常见属性能够安装他们的。

    您可能感兴趣的篇章:

    • datePicker——日期选用控件(with jquery)
    • Javascript jquery css 写的简短进程条控件
    • 听别人说jQuery的日期采纳控件
    • 基于jquery的让页面控件不可用的落到实处代码
    • asp.net jquery滚动滚动条加载数据的下拉控件
    • jQuery选中select控件 无法设置selected的消除方法
    • 基于jQuery的贯彻轻易的分页控件
    • 行使jquery与图片美化checkbox和radio控件的代码(打包下载)
    • 依据jQuery的取得各个控件Value的主意
    • JQuery里面包车型大巴两种选拔器 查找满意条件的元素$("#控件ID")
    • jWiard 基于JQuery的兵不血刃的指引控件介绍
    • jquery获取tr中控件值并操作tr达成思路
    • jquery设置控件地方的主意
    • .net mvc页面UI之Jquery博客日历控件落成代码
    • jquery 日期控件datepicker属性详细深入分析
    • Jquery获得控件值的三种情势计算
    • jquery日历控件完成格局分享
    • JQuery EasyUI 日期控件怎样支配日期选拔距离
    • jquery javascript编写国籍控件
    //必输项:
     <input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input>
    //格式的验证:
     <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></input>
     <input class="easyui-validatebox" type="text" name="email" data-options="required:true,validType:'url'"></input>
    //长度范围的验证:
     <input class="easyui-validatebox" data-options="validType:'length[1,3]'"> 
    

    2、多行文本框

    easyui的分界面样式,能够动用easyui-validatebox,或然暗许的textarea就能够。

    图片 7

    分界面代码如下所示:

    复制代码 代码如下:

    <textarea id="type_Remark" class="easyui-validatebox" required="true" style="height:100px;"></textarea>

    或者

    复制代码 代码如下:

    <textarea style="height:60px;width:200px" id="type_Remark" name="Remark"></textarea>

    赋值给分界面控件代码如下:

    复制代码 代码如下:

    $("#type_Remark").val(json.Remark);

    获得分界面控件的值代码如下:

    复制代码 代码如下:

    var text = $("#type_Remark").val();

    3、密码文本框

    密码文本框和健康的文本框同样,只是输入字符的时候,系统做了遮掩呈现而已,把它看做一个来单独表明,也是因为它也是大面积输入的一种。

    图片 8

    分界面代码如下所示:

    复制代码 代码如下:

     <input type="password" name="password" style="width:260px;"></input>

    赋值给分界面控件代码如下:

    复制代码 代码如下:

    var password = '123';
    $("#Password").val(password)

    收获分界面控件的值代码如下:

          $("#btnLogin").click(function () {
            var postData = {
              UserName: $("#UserName").val(),
              Password: $("#Password").val(),
              Code: $("#Code").val()
            }; 
    

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:依附jquery跨浏览器呈现的file上传控件

    关键词: 68399皇家赌场