Bootstrap-DatetimePicker est un plug-in de sélection de temps léger qui prend en charge la sélection du temps, l'internationalisation et est assez simple à appliquer. Uploadify est un plug-in qui prend en charge plusieurs téléchargements de fichiers. J'ai récemment appliqué ces deux plug-ins pour faire quelques petites applications, ce qui fait du bien, donc je vais donner un bref résumé.
1. Précautions pour l'introduction de plug-ins
Pour télécharger le site officiel de Bootstrap-Datetimepicker, trois fichiers doivent être utilisés pour appliquer Bootstrap-Datetimepicker: bootstrap-datetimepicker.min.js, bootstrap-datetimepicker.min.css ((style), Bootstrap-Table-Zh-Cnify. jQuery.uploadify.min.js, uploadify.css, uploadify-cancel.png, uploadify.swf
2. Bootstrap-Datetimepicker Time Sélection
<div> <label for = "starttime"> starttime: </bable> <div data-link-field = "dtp_input1"> <input id = "showtime" th: value = "$ {# dates.format (activité.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'). HH: MM: SS ', // Langue chinoise:' ZH-CN ', // Quel jour de la semaine commence, 0 (dimanche) à 6 (samedi) Weekstart: 1, // Afficher un bouton "aujourd'hui" au bas du sélecteur de date de date est fermé immédiatement après avoir sélectionné une date d'auto-oignage: 1, 1, //, si elle est la date de la date de la date. 1, // La vue affichée d'abord après l'ouverture du sélecteur de date de date: 2, // Lorsque le sélecteur est fermé, est-il forcé d'analyser la valeur dans la boîte d'entrée ForceParse: 0, Showmeridian: 1, // cette valeur est utilisée comme valeur de pas pour construire une vue d'heure MinuteStep: 1});L'effet final est le suivant:
3. Téléchargement de l'image Téléchargement
$ ("# file_upload"). uploadify ({'méthode': 'post', 'auto': true, // téléchargez automatiquement automatiquement après avoir sélectionné l'image 'ButtonText': 'upload image', 'siploadlimit': 1, 'cancelimg': '..'Uploader': "/uploadimage?_csrf="+$("#_csrf").val(),'swf ':' ../../../resources/js/uploadify.swf ', // opération après le téléchargement réussi' onuploadsuccess ': function (file, data, réponse) {$ (" # imgurl ").Code côté serveur
@ Réponsebody @ requestmapping (value = "/ uploadImage") public String uploadImage (httpsservletRequest) lève une exception {réponseBject <string> ResponseObject = new ResponseObject <string> (globalErrCode.SuCe multipartRequest.getFileNames (); MultipartFile MultipartFile = MultipArtReQuest.getFile (filenames.next ()); ... Enregistrer plusieurs lignes ici RETOUR URL;}Effet d'affichage final:
Ce qui précède est un résumé des exemples d'application du plug-in DateTimePicker et Uploadify dans Bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!