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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
Oct 26 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
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下清空字符串中的HTML标签的代码
2010/09/06 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
2014/07/30 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
2017/01/18 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
Vuex 入门教程
2018/01/10 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
在Chrome DevTools中调试JavaScript的实现
2020/04/07 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
2020/12/19 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
使用浏览器访问python写的服务器程序
2019/10/10 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
货代行业个人求职简历的自我评价
2013/10/22 职场文书
环境工程毕业生自荐信
2013/11/17 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
微笑面对生活演讲稿
2014/05/13 职场文书
学习“七一”讲话精神体会
2014/07/08 职场文书
物业保洁员岗位职责
2015/02/13 职场文书
毕业欢送会致辞
2015/07/29 职场文书
2015年文秘个人工作总结
2015/10/14 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书