Bootstrap-DateTiMepicker es un complemento de selección de tiempo ligero que admite la selección de tiempo, la internacionalización y es bastante simple de aplicar. Uploadify es un complemento que admite múltiples cargas de archivos. Recientemente apliqué estos dos complementos para hacer algunas aplicaciones pequeñas, lo que me siento bien, por lo que daré un breve resumen.
1. Precauciones para introducir complementos
Para descargar el sitio web oficial de Bootstrap-DateTiMepicker, se deben utilizar tres archivos para aplicar bootstrap-dateTiMepicker: bootstrap-dateTiMepicker.min.js, bootstrap-datetImepicker.min.css ((estilo), bootstrap-table-zh-cn.min.js (chinos). Los archivos descargados por los archivos descargados por el sitio web de los oficiales de la carga de la renta de los archivos de la renta de los archivos de la carga de los archivos. jquery.uploadify.min.js, uploadify.css, uploadify-cancel.png, uploadify.swf
2. Selección de tiempo de bootstrap-datetiMepicker
<div> <etiqueta for = "starttime"> starttime: </label> <div data-link-field = "dtp_input1"> <input id = "showtime" th: value = "$ {#fates.format (activity.starTtime, 'yyyyy-mm-dd hh: mm: ss')}" style = "margin-lieft: 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 ', // Idioma chino:' zh-cn ', // que comienza el día de la semana, 0 (domingo) a 6 (sábado) WeekStart: 1, // Mostrar un botón "hoy" en la parte inferior del componente selectivo de fecha para seleccionar la fecha actual de hoy: 1, // este selector de tiempo de fecha está cerrado inmediatamente después de seleccionar una fecha. 1, // La vista se muestra por primera vez después de que se abre el selector de fecha y hora: 2, // Cuando el selector está cerrado, ¿se ve obligado a analizar el valor en el cuadro de entrada ForceParse: 0, Showmeridian: 1, // Este valor se usa como un valor de paso para construir una visión de una hora minutestep: 1});El efecto final es el siguiente:
3. Subir la carga de la imagen
$ ("#file_upload"). uploadify ({'método': 'post', 'automático': true,/la carga automática automáticamente después de seleccionar la imagen 'buttontext': 'upload image', 'simplloadlimit': 1, 'canceliMg': '../../../RRESOURCES/IMAGS /PLOAdify-CANCANCNG'P'P'P': "/uploadimage?_csrf="+$($("#_csrf").val(),'swf ':' ../../../resources/js/uploadify.swf ', // operación después de la carga exitosa' onUploadsuccess ': función (archivo, datos, respuesta) {$ ("#imgurl ").Código del lado del servidor
@ResponseBody@requestMapping (value = "/uploadImage") public String uploadImage (httpservletRequest request) lanza la excepción {ResponseObject <String> ResponseObject = new ResponseObject <String> (globalErrIrcode.sucess); multiparthtpservletRequest multipRequest = (multiparthtpservletRequest) request; iterator <string> string> string> string> file> file> file> file> fileReMaRates <string> file> file> file> fileNeReS = string> file> fileReS = string> fileReSe. multipartRequest.getFileNames (); MultipartFile multipartFile = multiparTruCest.getFile (filenames.next ()); ... Guarde varias líneas aquí URL de retorno;}Efecto de visualización final:
Lo anterior es un resumen de los ejemplos de aplicaciones del DatueMepicker y cargue el complemento en Bootstrap introducido por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!