AceAdmin有很多Html控件，而下载下来之后全部混杂在一起，想用一个控件有时得调整半天，干脆整理出一个版本，而且结合起来MVC的封装。以后就不用一个js css的调了。
在MVC中Html的控件有两种，一个带for一个不带for。
@Html.TextArea：直接输出一个文本框，可以自定义输出任何内容。
@Html.TextAreaFor：输出绑定Model的文本框。
一、下拉框
1、基本示例
视图：
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>下拉框 - Ace Admin</title> @* 这个控制宽度(只是控制div的) *@ <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> @* 以下两个对下拉框的样式有影响 *@ <link rel="stylesheet" href="/assets/css/chosen.css" /> <link rel="stylesheet" href="/assets/css/ace.min.css" />
<link rel="stylesheet" href="/assets/css/css.css"/>
<link rel="stylesheet" href="/assets/css/font-awesome.min.css" /> <script src="/Scripts/jquery_2_1_0_min.js"></script> <!--[if IE]> <script src="/Scripts/jquery_1_11_0_min.js"></script> <![endif]--> <script src="/assets/js/chosen.jquery.min.js"></script> <script type="text/javascript"> $(function ($) { $('.chosen-select').chosen({ allow_single_deselect: true }); //窗口大小改变时，下拉框跟着缩放 $(window).on('resize.chosen', function () { var w = $('.chosen-select').parent().width(); $('.chosen-select').next().css({ 'width': w }); }).trigger('resize.chosen'); }); </script> </head> <body> <div class="modal-body"> <div class="row"> <div class="col-xs-12 col-sm-4"> <!-- Html示例 --> <select class="chosen-select" name="Hero" data-placeholder="请选择英雄..."> <option value=""></option> <!-- 默认的Text里不要放东西，否则不会选择(请选择) --> <option value="1">刘备</option> <option value="2">关羽</option> <option value="3">张飞</option> </select> <div class="space-4"></div> <!-- MVC版示例 --> @*对于AceAdmin很多-，在MVC中要用_代替*@ @Html.DropDownList("SelectListItem", null, null, new { @class = "chosen-select", data_placeholder="请选择英雄...", name = "Hero" }) </div> </div> </div> </body> </html>
后台：
public ActionResult HtmlControl() { List<SelectListItem> SelectListItem = new List<SelectListItem>(); SelectListItem.Add(new SelectListItem { Text = " ", Value = "" }); SelectListItem.Add(new SelectListItem { Text = "刘备", Value = "1" }); SelectListItem.Add(new SelectListItem { Text = "关羽", Value = "2" }); SelectListItem.Add(new SelectListItem { Text = "张飞", Value = "3" }); ViewBag.SelectListItem = SelectListItem; return View(); }
另外推荐1种创建SelectList的方法，能与ORM工具比较好地结合。
//模拟数据库查出来的数据 List<Person> ListPerson = new List<Person>() { new Person(){ Id = 0, Name=" " }, new Person(){ Id = 1, Name="刘备" }, new Person(){ Id = 2, Name="关羽" }, new Person(){ Id = 3, Name="张飞" } }; SelectList ListItem = new SelectList(ListPerson, "Id", "Name"); //还有第四个参数是默认选定的值 ViewBag.SelectListItem = ListItem;
如果是用SelectListItem，那么要配合Linq的Select()方法查出Text与Value
IEnumerable<SelectListItem> items = ListPerson.Select(item => new SelectListItem { Value = item.Id.ToString(), Text = item.Name });
2、多选
如果是多选，只需要添加一个属性就OK了，其他完全一样：multiple="multiple"
3、搜索框
class="form-control"与class = "chosen-select"的区别就在于有没有搜索框。
二、文本框
文本框的示例也有很多种：
- 普通文本框
- 最长文本框
- 密码
- readonly
- disabled
- 可控大小
- 可控长度
- 带图标文本框
- 带提示文本框
- Tab标签文本框(用到的Js最多，而且又不支持IE，不好用的东西)
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>文本框 - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link href="/assets/css/font-awesome.min.css" rel="stylesheet" /> <link href="/assets/css/css.css" rel="stylesheet" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> <!-- 可拖动控制长度的文本框的按钮 --> <link rel="stylesheet" href="/assets/css/jquery-ui.custom.min.css" /> </head> <body> <div class="row"> <div class="col-xs-12"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> Text Field </label> <div class="col-sm-9"> <input type="text" id="form-field-1" placeholder="Username" class="col-xs-10 col-sm-5" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1"> Full Length </label> <div class="col-sm-9"> <input type="text" id="form-field-1-1" placeholder="Text Field" class="form-control" /> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> Password Field </label> <div class="col-sm-9"> <input type="password" id="form-field-2" placeholder="Password" class="col-xs-10 col-sm-5" /> <span class="help-inline col-xs-12 col-sm-7"> <span class="middle">Inline help text</span> </span> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> Readonly field </label> <div class="col-sm-9"> <input readonly="" type="text" class="col-xs-10 col-sm-5" id="form-input-readonly" value="This text field is readonly!" /> <span class="help-inline col-xs-12 col-sm-7"> <label class="middle"> <input class="ace" type="checkbox" id="id-disable-check" /> <span class="lbl"> Disable it!</span> </label> </span> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-4">Relative Sizing</label> <div class="col-sm-9"> <input class="input-sm" type="text" id="form-field-4" placeholder=".input-sm" /> <div class="space-2"></div> <div class="help-block" id="input-size-slider"></div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-5">Grid Sizing</label> <div class="col-sm-9"> <div class="clearfix"> <input class="col-xs-1" type="text" id="form-field-5" placeholder=".col-xs-1" /> </div> <div class="space-2"></div> <div class="help-block" id="input-span-slider"></div> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right">Input with Icon</label> <div class="col-sm-9"> <span class="input-icon"> <input type="text" id="form-field-icon-1" /> <i class="ace-icon fa fa-leaf blue"></i> </span> <span class="input-icon input-icon-right"> <input type="text" id="form-field-icon-2" /> <i class="ace-icon fa fa-leaf green"></i> </span> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-6">Tooltip and help button</label> <div class="col-sm-9"> <input data-rel="tooltip" type="text" id="form-field-6" placeholder="Tooltip on hover" title="Hello Tooltip!" data-placement="bottom" /> <span class="help-button" data-rel="popover" data-trigger="hover" data-placement="left" data-content="More details." title="Popover on hover">?</span> </div> </div> <div class="space-4"></div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-tags">Tag input</label> <div class="col-sm-9"> <div class="inline"> <input type="text" name="tags" id="form-field-tags" value="Tag Input Control" placeholder="Enter tags ..." /> </div> </div> </div> </form> </div> </div> <script src="/Scripts/jquery_2_1_0_min.js"></script> <script type="text/javascript"> window.jQuery || document.write("<script src='/assets/js/jquery.min.js'>" + "<" + "/script>"); </script> @* Tag文本框(Taq需要用到特别多的js) *@ <script src="/Scripts/bootstrap.min.js"></script> <script src="/assets/js/bootstrap-tag.min.js"></script> <script src="/assets/js/jquery.knob.min.js"></script> <script src="/assets/js/jquery.autosize.min.js"></script> <script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script> <script src="/assets/js/jquery.maskedinput.min.js"></script> <script src="/assets/js/bootstrap-colorpicker.min.js"></script> <script src="/assets/js/jquery-ui.custom.min.js"></script> <script src="/assets/js/jquery.ui.touch-punch.min.js"></script> <script src="/assets/js/chosen.jquery.min.js"></script> <script src="/assets/js/fuelux/fuelux.spinner.min.js"></script> <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script> <script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script> <script src="/assets/js/date-time/moment.min.js"></script> <script src="/assets/js/date-time/daterangepicker.min.js"></script> <script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script> <script src="/assets/js/ace.min.js"></script> <script src="/assets/js/ace-elements.min.js"></script> @* Tag文本框 *@ <script type="text/javascript"> $(function ($) { @* Disable it!点击时 *@ $('#id-disable-check').on('click', function () { var inp = $('#form-input-readonly').get(0); if (inp.hasAttribute('disabled')) { inp.setAttribute('readonly', 'true'); inp.removeAttribute('disabled'); inp.value = "This text field is readonly!"; } else { inp.setAttribute('disabled', 'disabled'); inp.removeAttribute('readonly'); inp.value = "This text field is disabled!"; } }); @* 带提示的文本框生效 *@ $('[data-rel=tooltip]').tooltip({ container: 'body' }); $('[data-rel=popover]').popover({ container: 'body' }); @* 拖动条控制文本框大小 *@ $("#input-size-slider").css('width', '200px').slider({ value: 1, range: "min", min: 1, max: 8, step: 1, slide: function (event, ui) { var sizing = ['', 'input-sm', 'input-lg', 'input-mini', 'input-small', 'input-medium', 'input-large', 'input-xlarge', 'input-xxlarge']; var val = parseInt(ui.value); $('#form-field-4').attr('class', sizing[val]).val('.' + sizing[val]); } }); @* 拖动条控制文本框长度 *@ $("#input-span-slider").slider({ value: 1, range: "min", min: 1, max: 12, step: 1, slide: function (event, ui) { var val = parseInt(ui.value); $('#form-field-5').attr('class', 'col-xs-' + val).val('.col-xs-' + val); } }); @* Tag文本框(Taq需要用到特别多的js) *@ var tag_input = $('#form-field-tags'); try { tag_input.tag( { placeholder: tag_input.attr('placeholder'), //enable typeahead by specifying the source array source: ace.vars['US_STATES'],//defined in ace.js >> ace.enable_search_ahead /** //从Web后台读取数据的写法 source: function(query, process) { $.ajax({url: 'remote_source.php?q='+encodeURIComponent(query)}) .done(function(result_items){ process(result_items); }); } */ } ); //编程的方式添加一个项 var $tag_obj = $('#form-field-tags').data('tag'); $tag_obj.add('Programmatically Added'); } catch (e) { //旧IE版本兼容 tag_input.after('<textarea id="' + tag_input.attr('id') + '" name="' + tag_input.attr('name') + '" rows="3">' + tag_input.val() + '</textarea>').remove(); //$('#form-field-tags').autosize({append: " "}); } }); </script> </body> </html>
三、TextArea
TextArea在AceAdmin里多了两个比较特别的功能。
1、限制输入字符数
class="form-control limited" maxlength="50"
2、自适应高度，输入越多高度自动增长
class="autosize-transition form-control"
3、默认文本
placeholder="默认显示出来的文本"
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>TextArea - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> </head> <body class="no-skin"> <div class="col-sm-4"> <div class="widget-body"> <div class="widget-main"> <div> <textarea class="form-control" id="form-field-8" placeholder="Default Text"></textarea> </div> <hr /> <div> <textarea class="form-control limited" id="form-field-9" maxlength="50"></textarea> </div> <hr /> <div> @Html.TextArea("text", "你在他想还好吗", new { @class = "form-control limited", maxlength = "20" }) </div> <hr /> <div> <textarea id="form-field-11" class="autosize-transition form-control"></textarea> </div> </div> </div> </div> @* TextArea用到的js *@ <script src="/Scripts/jquery_2_1_0_min.js"></script> <script src="/Scripts/bootstrap.min.js"></script> <script src="/assets/js/chosen.jquery.min.js"></script> <script src="/assets/js/jquery.autosize.min.js"></script> <script src="/assets/js/jquery.inputlimiter.1.3.1.min.js"></script> <script src="/assets/js/jquery.maskedinput.min.js"></script> <!-- inline scripts related to this page --> <script type="text/javascript"> $(function ($) { $('textarea[class*=autosize]').autosize({ append: " " }); $('textarea.limited').inputlimiter({ remText: '%n character%s remaining...', limitText: 'max allowed : %n.' }); }); </script> </body> </html>
四、限制格式的文本框
主要是由jQuery.maskedinput插件实现。
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>Form Elements - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> <link rel="stylesheet" href="/assets/css/font-awesome.min.css" /> <link href="/assets/css/css.css" rel="stylesheet" /> <script src="/Scripts/jquery_2_1_0_min.js"></script> <script src="/assets/js/jquery.maskedinput.min.js"></script> <script src="/assets/js/ace.min.js"></script> <script src="/assets/js/ace-elements.min.js"></script> <script type="text/javascript"> $(function ($) { $.mask.definitions['~'] = '[+-]'; $('.input-mask-date').mask('9999/99/99'); $('.input-mask-phone').mask('(999) 9999999'); $('.input-mask-eyescript').mask('~9.99 ~9.99 999'); $(".input-mask-product").mask("a*-999-a999", { placeholder: " ", completed: function () { alert("You typed the following: " + this.val()); } }); }); </script> </head> <body class="no-skin"> <div class="col-xs-12 col-sm-4"> <div class="widget-box"> <div class="widget-header"> <h4 class="widget-title">限制格式输入框</h4> <span class="widget-toolbar"> <a href="#" data-action="settings"> <i class="ace-icon fa fa-cog"></i> </a> <a href="#" data-action="reload"> <i class="ace-icon fa fa-refresh"></i> </a> <a href="#" data-action="collapse"> <i class="ace-icon fa fa-chevron-up"></i> </a> <a href="#" data-action="close"> <i class="ace-icon fa fa-times"></i> </a> </span> </div> <div class="widget-body"> <div class="widget-main"> <div> <label for="form-field-mask-1"> 日期 <small class="text-success">9999/99/99</small> </label> <div class="input-group"> <input class="form-control input-mask-date" type="text" id="form-field-mask-1" /> <span class="input-group-btn"> <button class="btn btn-sm btn-default" type="button"> <i class="ace-icon fa fa-calendar bigger-110"></i> Go! </button> </span> @Html.TextBox("date", "2014-12-12", new { @class = "form-control input-mask-date" }) <span class="input-group-btn"> <button class="btn btn-sm btn-default" type="button"> <i class="ace-icon fa fa-calendar bigger-110"></i> Go! </button> </span> </div> </div> <hr /> <div> <label for="form-field-mask-2"> 电话 <small class="text-warning">(999) 9999999</small> </label> <div class="input-group"> <span class="input-group-addon"> <i class="ace-icon fa fa-phone"></i> </span> <input class="form-control input-mask-phone" type="text" id="form-field-mask-2" /> </div> </div> <hr /> <div> <label for="form-field-mask-3"> 密钥 <small class="text-error">a*-999-a999</small> </label> <div class="input-group"> <input class="form-control input-mask-product" type="text" id="form-field-mask-3" /> <span class="input-group-addon"> <i class="ace-icon fa fa-key"></i> </span> </div> </div> <hr /> <div> <label for="form-field-mask-4"> Eye Script <small class="text-info">~9.99 ~9.99 999</small> </label> <div> <input class="input-medium input-mask-eyescript" type="text" id="form-field-mask-4" /> </div> </div> </div> </div> </div> </div> </body> </html>
五、CheckBox与Radio与CheckBox实现的开关
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>CheckBox与Radio与开关 - Ace Admin</title> <link href="/assets/css/bootstrap.min.css" rel="stylesheet" /> <link href="/assets/css/font-awesome.min.css" rel="stylesheet" /> <link href="/assets/css/css.css" rel="stylesheet" /> <link href="/assets/css/ace.min.css" rel="stylesheet" /> <script src="/Scripts/jquery_2_1_0_min.js"></script> <script type="text/javascript"> $(function ($) { $('#chosen-multiple-style').on('click', function (e) { var target = $(e.target).find('input[type=radio]'); var which = parseInt(target.val()); if (which == 2) $('#form-field-select-4').addClass('tag-input-style'); else $('#form-field-select-4').removeClass('tag-input-style'); }); }); </script> </head> <body class="no-skin"> <div class="row"> <div class="col-xs-12 col-sm-5"> <div class="control-group"> <label class="control-label bolder blue">Checkbox</label> <div class="checkbox"> <label> <input name="form-field-checkbox" type="checkbox" class="ace" /> <span class="lbl"> choice 1</span> </label> </div> <div class="checkbox"> <label> <input name="form-field-checkbox" class="ace ace-checkbox-2" type="checkbox" /> <span class="lbl"> choice 2</span> </label> </div> <div class="checkbox"> <label class="block"> <input name="form-field-checkbox" disabled="" type="checkbox" class="ace" /> <span class="lbl"> disabled</span> </label> </div> </div> </div> <div class="col-xs-12 col-sm-6"> <div class="control-group"> <label class="control-label bolder blue">Radio</label> <div class="radio"> <label> <input name="form-field-radio" type="radio" class="ace" /> <span class="lbl"> radio option 1</span> </label> </div> <div class="radio"> <label> <input name="form-field-radio" type="radio" class="ace" /> <span class="lbl"> radio option 2</span> </label> </div> <div class="radio"> <label> <input disabled="" name="form-field-radio" type="radio" class="ace" /> <span class="lbl"> disabled</span> </label> </div> </div> </div> </div> <hr /> <div class="form-group"> <label class="control-label col-xs-12 col-sm-3">开关控制</label> <div class="controls col-xs-12 col-sm-9"> <div class="row"> <div class="col-xs-3"> <label> <input name="switch-field-1" class="ace ace-switch ace-switch-3" type="checkbox" /> <span class="lbl"></span> </label> </div> </div> </div> </div> </body> </html>
CheckBox当选中时默认提交的值为"On"，如果选中的CheckBox提交true，则可以增加一个value="true"，可以这样写：
<input name="IsTop" type="checkbox" class="ace" value="true">
六、日期选择控件
日期控件主要用DateTime Picker来实现
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>日期选择控件 - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link href="/assets/css/font-awesome.min.css" rel="stylesheet" /> <link rel="stylesheet" href="/assets/css/datepicker.css" /> <link rel="stylesheet" href="/assets/css/bootstrap-timepicker.css" /> <link rel="stylesheet" href="/assets/css/daterangepicker.css" /> <link rel="stylesheet" href="/assets/css/bootstrap-datetimepicker.css" /> <link href="/assets/css/css.css" rel="stylesheet" /> <link href="/assets/css/ace.min.css" rel="stylesheet" /> <script src="/assets/js/ace-extra.min.js"></script> <script src="/Scripts/jquery_2_1_0_min.js"></script> <script src="/assets/js/date-time/bootstrap-datepicker.min.js"></script> <script src="/assets/js/date-time/bootstrap-timepicker.min.js"></script> <script src="/assets/js/date-time/moment.min.js"></script> <script src="/assets/js/date-time/daterangepicker.min.js"></script> <script src="/assets/js/date-time/bootstrap-datetimepicker.min.js"></script> <script type="text/javascript"> $(function ($) { $('.date-picker').datepicker({ autoclose: true, todayHighlight: true }) .next().on(ace.click_event, function () { $(this).prev().focus(); }); $('.input-daterange').datepicker({ autoclose: true }); $('input[name=date-range-picker]').daterangepicker({ 'applyClass': 'btn-sm btn-success', 'cancelClass': 'btn-sm btn-default', locale: { applyLabel: 'Apply', cancelLabel: 'Cancel', } }) .prev().on(ace.click_event, function () { $(this).next().focus(); }); $('#timepicker1').timepicker({ minuteStep: 1, showSeconds: true, showMeridian: false }).next().on(ace.click_event, function () { $(this).prev().focus(); }); $('#date-timepicker1').datetimepicker().next().on(ace.click_event, function () { $(this).prev().focus(); }); }); </script> </head> <body class="no-skin"> <div class="col-sm-4"> <div class="widget-box"> <div class="widget-header"> <h4 class="widget-title">日期选择</h4> <span class="widget-toolbar"> <a href="#" data-action="settings"> <i class="ace-icon fa fa-cog"></i> </a> <a href="#" data-action="reload"> <i class="ace-icon fa fa-refresh"></i> </a> <a href="#" data-action="collapse"> <i class="ace-icon fa fa-chevron-up"></i> </a> <a href="#" data-action="close"> <i class="ace-icon fa fa-times"></i> </a> </span> </div> <div class="widget-body"> <div class="widget-main"> <label for="id-date-picker-1">日期选择</label> <div class="row"> <div class="col-xs-8 col-sm-11"> <div class="input-group"> <input class="form-control date-picker" id="id-date-picker-1" type="text" data-date-format="dd-mm-yyyy" /> <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> </div> <div class="input-group"> @Html.TextBox("Pick", DateTime.Now.ToString("yyyy-MM-dd"), new { @class = "form-control date-picker", data_date_format = "yyyy-mm-dd" }) <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> </div> </div> </div> <div class="space space-8"></div> <label>范围选择</label> <div class="row"> <div class="col-xs-8 col-sm-11"> <div class="input-daterange input-group"> <input type="text" class="input-sm form-control" name="start" /> <span class="input-group-addon"> <i class="fa fa-exchange"></i> </span> <input type="text" class="input-sm form-control" name="end" /> </div> </div> </div> <hr /> <label for="id-date-range-picker-1">日期范围选择</label> <div class="row"> <div class="col-xs-8 col-sm-11"> <div class="input-group"> <span class="input-group-addon"> <i class="fa fa-calendar bigger-110"></i> </span> <input class="form-control" type="text" name="date-range-picker" id="id-date-range-picker-1" /> </div> </div> </div> <hr /> <label for="timepicker1">时间选择</label> <div class="input-group bootstrap-timepicker"> <input id="timepicker1" type="text" class="form-control" /> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> <hr /> <label for="date-timepicker1">日期-时间选择</label> <div class="input-group"> <input id="date-timepicker1" type="text" class="form-control" /> <span class="input-group-addon"> <i class="fa fa-clock-o bigger-110"></i> </span> </div> </div> </div> </div> </div> </body> </html>
七、上传控件
上传控件好像很强大，可以不上传先获取文件名了，具体怎么实现的还不是很清楚。
@{ Layout = null; } <!DOCTYPE html> <html lang="en"> <head> <title>文本上传框 - Ace Admin</title> <link rel="stylesheet" href="/assets/css/bootstrap.min.css" /> <link href="/assets/css/font-awesome.min.css" rel="stylesheet" /> <link href="/assets/css/css.css" rel="stylesheet" /> <link rel="stylesheet" href="/assets/css/ace.min.css" /> <script src="/assets/js/ace-extra.min.js"></script> <script src="/Scripts/jquery_2_1_0_min.js"></script> <script src="/assets/js/ace-elements.min.js"></script> <script type="text/javascript"> $(function ($) { $('#id-input-file-1 , #id-input-file-2').ace_file_input({ no_file: '暂无文件 ...', btn_choose: 'Choose', btn_change: 'Change', droppable: false, onchange: null, thumbnail: false }); $('#id-input-file-3').ace_file_input({ style: 'well', btn_choose: 'Drop files here or click to choose', btn_change: null, no_icon: 'ace-icon fa fa-cloud-upload', droppable: true, thumbnail: 'small' , preview_error: function (filename, error_code) { } }).on('change', function () { }); $('#id-file-format').removeAttr('checked').on('change', function () { var whitelist_ext, whitelist_mime; var btn_choose var no_icon if (this.checked) { btn_choose = "Drop images here or click to choose"; no_icon = "ace-icon fa fa-picture-o"; whitelist_ext = ["jpeg", "jpg", "png", "gif", "bmp"]; whitelist_mime = ["image/jpg", "image/jpeg", "image/png", "image/gif", "image/bmp"]; } else { btn_choose = "Drop files here or click to choose"; no_icon = "ace-icon fa fa-cloud-upload"; whitelist_ext = null; whitelist_mime = null; } var file_input = $('#id-input-file-3'); file_input .ace_file_input('update_settings', { 'btn_choose': btn_choose, 'no_icon': no_icon, 'allowExt': whitelist_ext, 'allowMime': whitelist_mime }) file_input.ace_file_input('reset_input'); file_input .off('file.error.ace') .on('file.error.ace', function (e, info) { }); }); }); </script> </head> <body class="no-skin"> <div class="widget-box col-xs-6"> <div class="widget-header"> <h4 class="widget-title">上传文本框</h4> <div class="widget-toolbar"> <a href="#" data-action="collapse"> <i class="ace-icon fa fa-chevron-up"></i> </a> <a href="#" data-action="close"> <i class="ace-icon fa fa-times"></i> </a> </div> </div> <div class="widget-body"> <div class="widget-main"> <div class="form-group"> <div class="col-xs-12"> <input type="file" id="id-input-file-2" /> </div> </div> <div class="form-group"> <div class="col-xs-12"> <input multiple="" type="file" id="id-input-file-3" /> </div> </div> <label> <input type="checkbox" name="file-format" id="id-file-format" class="ace" /> <span class="lbl"> 只允许图片</span> </label> </div> </div> </div> </body> </html>