這篇文章主要介紹了BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下

bootstrap-datetimepicker是一款輕便的時(shí)間選擇插件，支持Time選擇，國際化，應(yīng)用起來相當(dāng)簡單。而uploadify則是一款支持多文件上傳的插件。最近應(yīng)用這兩個(gè)插件做了些小應(yīng)用，感覺不錯(cuò)，簡單做個(gè)總結(jié)。

1.引入插件注意事項(xiàng)

到 bootstrap-datetimepicker 官網(wǎng)下載，應(yīng)用bootstrap-datetimepicker需要用到三個(gè)文件：bootstrap-datetimepicker.min.js，bootstrap-datetimepicker.min.css（（樣式），bootstrap-table-zh-CN.min.js（漢化）。uploadify官網(wǎng)下載的文件中則需引用到j(luò)Query.uploadify.min.js，uploadify.css，uploadify-cancel.png，uploadify.swf

2.bootstrap-datetimepicker 時(shí)間選擇

<div class="form-group" >

<label for="startTime" class="col-sm-2 control-label">開始時(shí)間:</label>

<div class="input-group date form_datetime col-sm-5" data-link-field="dtp_input1">

<input class="form-control" id= "showTime" th:value="${#dates.format(activity.startTime, 'yyyy-MM-dd HH:mm:ss')}" style="margin-left: 14px;" type="text" value="" readonly="readonly" />

<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>

<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>

</div>

<input type="hidden" id="dtp_input1" name="startTime" /><br/>

</div>

$('.form_datetime').datetimepicker({

//時(shí)間格式化

format: 'yyyy-MM-dd HH:mm:ss',

//漢化

language: 'zh-CN',

//一周從哪一天開始,0（星期日）到6（星期六）

weekStart: 1,

//在日期時(shí)間選擇器組件的底部顯示一個(gè) "Today" 按鈕用以選擇當(dāng)前日期

todayBtn: 1,

//當(dāng)選擇一個(gè)日期之后是否立即關(guān)閉此日期時(shí)間選擇器。

autoclose: 1,

//如果為true, 高亮當(dāng)前日期

todayHighlight: 1,

//日期時(shí)間選擇器打開之后首先顯示的視圖

startView: 2,

//當(dāng)選擇器關(guān)閉的時(shí)候，是否強(qiáng)制解析輸入框中的值

forceParse: 0,

showMeridian: 1,

//此數(shù)值被當(dāng)做步進(jìn)值用于構(gòu)建小時(shí)視圖

minuteStep : 1

});

最終效果如下圖：

3.uploadify圖片上傳

$("#file_upload").uploadify({

'method' : 'post',

'auto': true,//選擇完圖片后自動(dòng)上傳

'buttonText': '上傳圖片',

'simUploadLimit' : 1,

'cancelImg': '../../../resources/images/uploadify-cancel.png',

'uploader' : "/uploadImage?_csrf="+$("#_csrf").val(),

'swf' : '../../../resources/js/uploadify.swf', //必須引入

//上傳成功后的操作

'onUploadSuccess' : function(file, data, response) {

$("#imgUrl").val(data);

}

});

服務(wù)器端代碼

@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());

...此處省去若干行

return url;

}

最終顯示效果：

以上所述是小編給大家介紹的BootStrap中Datetimepicker和uploadify插件應(yīng)用實(shí)例小結(jié)，希望對(duì)大家有所幫助