Bootstrap-dateTimepicker는 시간 선택, 국제화를 지원하며 적용하기가 매우 간단한 가벼운 시간 선택 플러그인입니다. Uploadify는 여러 파일 업로드를 지원하는 플러그인입니다. 최근 에이 두 플러그인을 적용하여 작은 응용 프로그램을 만들었습니다.
1. 플러그인 소개 예방 조치
Bootstrap-DatetimePicker의 공식 웹 사이트를 다운로드하려면 Bootstrap-DateTimepicker : Bootstrap-dateTimepicker.min.js, bootstrap-dateTimepicker.min.css ((스타일), Bootstrap-table-Zh-cn.min.js (중국어)를 적용하는 데 3 개의 파일이 사용되어야합니다. jquery.uploadify.min.js, uploadify.css, uploadify-cancel.png, uploadify.swf
2. Bootstrap-dateTimepicker 시간 선택
<div> <label for = "starttime"> starttime : </label> <div data-link-field = "dtp_input1"> <input id = "showtime"th : value = "$ {#dates.starttime, 'yyyy-mm-dd hh : mm : ss')}"style = "margin-left;" 유형 = "text"value = ""readonly = "readonly"/> <spanly "/<span> <span> </span> </span> </span> </div> <입력 유형 ="hidden "id ="dtp_input1 "name ="starttime "/> <br/> </div> $ ( '. form_datetime'). HH : MM : SS ', // 중국어 :'ZH-CN ', // 요일이 시작되는 날, 0 (일요일) ~ 6 (토요일) 주간 스타트 : // 날짜 시간 선택기 구성 요소의 맨 아래에 "오늘 날짜"버튼을 표시합니다. 1, // 날짜 시간 선택기가 열린 후 첫 번째보기 : // 선택기가 닫히면 입력 박스의 값을 구문 분석해야합니까?최종 효과는 다음과 같습니다.
3. 사진 업로드 업로드
$ ( "#file_upload"). ubloadify ({ 'method': 'post', 'auto': true, // 이미지를 선택한 후 자동으로 자동 업로드 ':'이미지 업로드 ','simuploadlimit ': 1,'cancelimg ':'../......../resources/uploadify-cancel.png ','uploadify-cancel.png ' "/uploadimage?_csrf="+$("#_csrf").val(),'swf ':'../../../../ resources/js/uploadify.swf ', // 성공적인 업로드 후 작동'기능 (파일, 데이터, 응답) {$ ("#imgurl ");서버 측 코드
@responsebody@requestmapping (value = "/uploadImage") public String uploadImage (httpservletrequest 요청) 예외 {responseObject <string> responseObject = new responseObject <string> (globalErrorCode.Sucess); multiparthTpservletRequest MultiptartRequest = (multiptarthttPerverQuest) 요청; iterator <strater = iterator. MultipartRequest.getFilenames (); multipartfile multipartfile = multipartrequest.getfile (filenames.next ()); ... 여기에 여러 줄을 저장하여 URL을 반환합니다.}최종 디스플레이 효과 :
위는 DateTimePicker의 응용 프로그램 예제 및 편집자가 소개 한 Bootstrap의 플러그인을 업로드합니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!