bootstrap-datetimepicker is a lightweight time selection plug-in that supports Time selection, internationalization, and is quite simple to apply. uploadify is a plug-in that supports multiple file uploads. I have recently applied these two plug-ins to make some small applications, which I feel good, so I will give a brief summary.
1. Precautions for introducing plug-ins
To download the official website of bootstrap-datetimepicker, three files need to be used to apply bootstrap-datetimepicker: bootstrap-datetimepicker.min.js, bootstrap-datetimepicker.min.css ((style), bootstrap-table-zh-CN.min.js (Chinese). The files downloaded by the official website of uploadify need to reference jQuery.uploadify.min.js, uploadify.css, uploadify-cancel.png, uploadify.swf
2.bootstrap-datetimepicker time selection
<div ><label for="startTime">StartTime:</label><div data-link-field="dtp_input1"><input id= "showTime" th:value="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm:ss')}" style="margin-left: 14px;" type="text" value="" readonly="readonly" /><span><span></span></span></span></div><input type="hidden" id="dtp_input1" name="startTime" /><br/></div>$('.form_datetime').datetimepicker({//Time format: 'yyyy-MM-dd HH:mm:ss',//Chinese language: 'zh-CN',//Which day of the week starts, 0 (Sunday) to 6 (Saturday) weekStart: 1,//Show a "Today" button at the bottom of the date-time selector component to select the current date todayBtn: 1,//Whether this date-time selector is closed immediately after selecting a date. autoclose: 1,//If true, highlight the current date todayHighlight: 1,//The view first displayed after the date-time selector is opened: 2,//When the selector is closed, is it forced to parse the value in the input box forceParse: 0, showMeridian: 1,//This value is used as a step value to build a hour view minuteStep: 1});The final effect is as follows:
3. Uploadify picture upload
$("#file_upload").uploadify({'method' : 'post','auto': true,//Auto upload automatically after selecting the image 'buttonText': 'upload image','simUploadLimit' : 1,'cancelImg': '../../../resources/images/uploadify-cancel.png','uploader' : "/uploadImage?_csrf="+$("#_csrf").val(),'swf' : '../../../resources/js/uploadify.swf', //Operation after successful uploading 'onUploadSuccess' : function(file, data, response) {$("#imgUrl").val(data);}});Server-side code
@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());...Save several lines here return url;}Final display effect:
The above is a summary of the application examples of the Datetimepicker and uploadify plug-in in BootStrap introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!