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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
Dec 27 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 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 jquery 多文件上传简单实例
2013/12/23 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
Javascript中Array.prototype.map()详解
2014/10/22 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
JavaScript计算器网页版实现代码分享
2016/07/15 Javascript
AngularJS中$http的交互问题
2017/03/29 Javascript
详解使用路由延迟加载 Angular 模块
2017/10/12 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
2020/11/18 Vue.js
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
python实现BackPropagation算法
2017/12/14 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python抓新型冠状病毒肺炎疫情数据并绘制全国疫情分布的代码实例
2020/02/05 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
银行学习十八大感想
2014/01/11 职场文书
霸王洗发水广告词
2014/03/14 职场文书
优秀驾驶员先进事迹材料
2014/05/04 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
中学生检讨书范文
2014/11/03 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
JS中forEach()、map()、every()、some()和filter()的用法
2022/05/11 Javascript