BootStrap中Datetimepicker和uploadify插件应用实例小结


Posted in Javascript onMay 26, 2016

bootstrap-datetimepicker是一款轻便的时间选择插件,支持Time选择,国际化,应用起来相当简单。而uploadify则是一款支持多文件上传的插件。最近应用这两个插件做了些小应用,感觉不错,简单做个总结。

1.引入插件注意事项

bootstrap-datetimepicker 官网下载,应用bootstrap-datetimepicker需要用到三个文件:bootstrap-datetimepicker.min.js,bootstrap-datetimepicker.min.css((样式),bootstrap-table-zh-CN.min.js(汉化)。uploadify官网下载的文件中则需引用到jQuery.uploadify.min.js,uploadify.css,uploadify-cancel.png,uploadify.swf

2.bootstrap-datetimepicker 时间选择

<div class="form-group" >
<label for="startTime" class="col-sm-2 control-label">开始时间:</label>
<div class="input-group date form_datetime col-sm-5" data-link-field="dtp_input1">
<input class="form-control" id= "showTime" th:value="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm:ss')}" style="margin-left: 14px;" type="text" value="" readonly="readonly" />
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="dtp_input1" name="startTime" /><br/>
</div>
$('.form_datetime').datetimepicker({
//时间格式化
format: 'yyyy-MM-dd HH:mm:ss',
//汉化
language: 'zh-CN',
//一周从哪一天开始,0(星期日)到6(星期六)
weekStart: 1,
//在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期
todayBtn: 1,
//当选择一个日期之后是否立即关闭此日期时间选择器。
autoclose: 1,
//如果为true, 高亮当前日期
todayHighlight: 1,
//日期时间选择器打开之后首先显示的视图
startView: 2,
//当选择器关闭的时候,是否强制解析输入框中的值
forceParse: 0,
showMeridian: 1,
//此数值被当做步进值用于构建小时视图
minuteStep : 1
});

最终效果如下图:

BootStrap中Datetimepicker和uploadify插件应用实例小结 

BootStrap中Datetimepicker和uploadify插件应用实例小结

3.uploadify图片上传

$("#file_upload").uploadify({
'method' : 'post',
'auto': true,//选择完图片后自动上传
'buttonText': '上传图片',
'simUploadLimit' : 1,
'cancelImg': '../../../resources/images/uploadify-cancel.png',
'uploader' : "/uploadImage?_csrf="+$("#_csrf").val(),
'swf' : '../../../resources/js/uploadify.swf', //必须引入
//上传成功后的操作
'onUploadSuccess' : function(file, data, response) {
$("#imgUrl").val(data);
}
});

服务器端代码

@ResponseBody
@RequestMapping(value = "/uploadImage")
public String uploadImage(HttpServletRequest request) throws Exception{
ResponseObject<String> responseObject = new ResponseObject<String>(GlobalErrorCode.SUCESS);
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
Iterator<String> fileNames = multipartRequest.getFileNames();
MultipartFile multipartFile = multipartRequest.getFile(fileNames.next());
...此处省去若干行

return url;
}

最终显示效果:

BootStrap中Datetimepicker和uploadify插件应用实例小结

BootStrap中Datetimepicker和uploadify插件应用实例小结

以上所述是小编给大家介绍的BootStrap中Datetimepicker和uploadify插件应用实例小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
理解javascript回调函数
Dec 28 Javascript
JS实现Select的option上下移动的方法
Mar 01 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
vue自定义右键菜单之全局实现
Apr 09 Vue.js
JavaScript中的Number数字类型学习笔记
May 26 #Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 #Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 #Javascript
JS代码实现table数据分页效果
May 26 #Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 #Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 #Javascript
JavaScript数组的栈方法与队列方法详解
May 26 #Javascript
You might like
PHP中的类型约束介绍
2015/05/11 PHP
php 批量查询搜狗sogou代码分享
2015/05/17 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
js验证框架之RealyEasy验证详解
2016/06/08 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
2017/10/27 jQuery
Angular 作用域scope的具体使用
2017/12/11 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue.js给动态绑定的radio列表做批量编辑的方法
2018/02/28 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
ES6基础之 Promise 对象用法实例详解
2019/08/22 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
浅析python打包工具distutils、setuptools
2018/04/20 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
Python3中的bytes和str类型详解
2019/05/02 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python多线程多进程实例对比解析
2020/03/12 Python
python 安装移动复制第三方库操作
2020/07/13 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
东方红海科技面试题软件测试方面
2012/02/08 面试题
研究生求职自荐书
2014/06/23 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers