Bootstrap-DateTimePicker ist ein leichter Zeitauswahl-Plug-In, das Zeitauswahl und Internationalisierung unterstützt und recht einfach zu bewerben ist. Uploadify ist ein Plug-In, das mehrere Datei-Uploads unterstützt. Ich habe kürzlich diese beiden Plug-Ins angewendet, um einige kleine Anwendungen zu erstellen, was sich gut anfühlt, also werde ich eine kurze Zusammenfassung geben.
1. Vorsichtsmaßnahmen zur Einführung von Plug-Ins
Um die offizielle Website von Bootstrap-DateTimePicker herunterzuladen, müssen drei Dateien verwendet werden, um Bootstrap-DateTimePicker anzuwenden: Bootstrap-DateTimePicker.min.js, Bootstrap-datetimePicker.min.cs (Stil), Bootstrap-Zh-Cn.Min.Min. jQuery.Uploadify.min.js, Uploadify.css, Uploadify-Cancel.png, Uploadify.swf
2. Stiefelstrap-DATETIMEPICKER-Zeitauswahl
<div> <label für = "startTime"> starttime: </label> <divid-link-field = "dtp_input1"> <input id = "showTime" th: value = "$ {#dates.format (activity.startTime, 'Yyyyyyy-Mm-dd HH: mm: ss')}" style = "margin-left: 14px;" type = "text" value = "" readonly = "readonly"/> <span> <span> </span> </span> </span> </div> <Eingabe type = "Hidden" id = "dtp_input1" name = "startTime"/> <br/> </div> $ ('. HH: MM: SS ', // chinesische Sprache:' Zh-Cn ', // Welcher Wochentag beginnt, 0 (Sonntag) bis 6 (Samstag) WeekStart: 1, // eine "Today" -Taste am unteren Rand des DATE-TATE-Selektorkomponenten zur Auswahl des aktuellen Datums heute Bittn: 1, //, ob dieses Datumsself-Selektor sofort geschlossen ist, das Datum der Heute ausgewählt wird. 1, // Die Ansicht, die zuerst angezeigt wird, nachdem der Datumsauswahlauswahl geöffnet wurde: 2, // Wenn der Selektor geschlossen ist, ist er gezwungen, den Wert im Eingabefeld Kraftsparse: 0, Showmeridian: 1, // Dieser Wert wird als Schrittwert verwendet, um eine Stunde Ansicht zu erstellen Minutestep: 1});Der endgültige Effekt ist wie folgt:
3. Das Bild hochladen hochladen
$ ("#File_Upload"). Uploadify ({'Methode': 'post', 'auto': true, // auto automatisch hochladen nach Auswahl des Bildes 'ButtonText': 'hochladen Bild', 'simUploadlimit': 1, 'civileImg': '../ .. "/uploadImage?_csrf="+$("#_csrf").val(),'swf' : '../../../resources/js/uploadify.swf', //Operation after successful uploading 'onUploadSuccess' : function(file, data, response) {$("#imgUrl").val(data);}});Serverseitiger Code
@ResponseBody@requestMapping (value = "/uploadImage") public String uploadImage (httpServletRequest Request) Auslöst Ausnahme {responseObject <string> responseObject = new responseObject <string> (globalErrorCode.sucess); multipArtrequest.getFileNames (); MultipartFile MultipartFile = multipArtrequest.getFile (Dateinamen.Next ()); ... Speichern Sie mehrere Zeilen hier return URL;}Endgültige Anzeigeeffekt:
Das obige ist eine Zusammenfassung der Anwendungsbeispiele des DateTimePicker- und Uploadify-Plug-Ins in Bootstrap, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!