給大家分享一個FileInput的使用實例,也是自己開發中遇到的問題
如何使用FileInput
使用時的樣式
使用FileInput只需要將相關的js,css下載引用即可,相信當大家遇到這個問題的時候已經有了bootstrap開發的知識,這些基礎已經不成問題
選擇文件後的樣式,如果配置妥當的話,點擊上傳按鈕進度條將會讀滿並顯示Done
前臺代碼,這裡有一個小小的問題 form表單的enctype屬性
表單中enctype="multipart/form-data"的意思,是設置表單的MIME編碼。默認情況,這個編碼格式是application/x-www-form-urlencoded,不能用於文件上傳;只有使用了multipart/form-data,才能完整的傳遞文件數據,進行下面的操作.
但是我們不需要配置,否則會出現form表單提交其他數據的問題
[html] view plain copy
class="help-block">支持jpg、jpeg、png、gif格式,大小不超過2.0M
接下來就說說如何配置相應的js
默認的fileinput.js應該有一個頁面加載完畢的動作,我們打開fileinput.js,果然有相應的方法。
[javascript] view plain copy
$(document).ready(function () { var接下來將它註釋掉,我們自己寫初始化方法,在fileinput,js裡添加initFileInput方法,並自己完成加載時的方法,文件上傳的一般邏輯應該是點擊文件上傳,將文件在後臺做相應的處理後將存儲的Url返回添加到form表單中,跟隨form表單一起提交到數據庫中。.on()方法為fileInput上傳文件後的回調方法,之後對返回的數據處理即可。
[javascript] view plain copy
function initFileInput(ctrlName,uploadUrl) { var control = $('#' + ctrlName); control.fileinput({ language: 'zh', //設置語言 uploadUrl: uploadUrl, showUpload: true, //是否顯示上傳按鈕 showRemove:true, showPreview : true, dropZoneEnabled: false, showCaption: true,//是否顯示標題 allowedPreviewTypes: ['image'], allowedFileTypes: ['image'], allowedFileExtensions: ['jpg', 'png', 'gif'], maxFileSize : 2000, maxFileCount: 1, //initialPreview: [ //預覽圖片的設置 // "後臺處理的代碼,我直接將文件存在了本地並將路徑返回。
[java] view plain copy
@ResponseBody @RequestMapping("picture/upLoad") public String upLoad(@RequestParam("file")CommonsMultipartFile file) throws Exception{ String path="E:/images/"+new Date().getTime()+file.getOriginalFilename(); File newFile = new File(path); file.transferTo(newFile); Map<string> map = new HashMap<string>(); /<string>/<string> map.put("pathUrl", path); JSONArray json = JSONArray.fromObject(map); return path; }到這裡大家應該學會了fileinput的使用,如有問題請留言