給大家分享一個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="line line-dashed line-lg pull-in">
- class="form-group">"
- <label> class="col-sm-3 control-label">照片/<label>
class="col-sm-9">- id="JSh_ZhP" type="file" class="file" name="file">
- type="hidden" id="JSh_ZhP_Path" name="tbllecturer.JSh_ZhP"/>
class="help-block">支持jpg、jpeg、png、gif格式,大小不超過2.0M
接下來就說說如何配置相應的js
默認的fileinput.js應該有一個頁面加載完畢的動作,我們打開fileinput.js,果然有相應的方法。
[javascript] view plain copy
- $(document).ready(function () {
- var $input = $('input.file[type=file]');
- if ($input.length) {
- $input.fileinput();
- } });
接下來將它註釋掉,我們自己寫初始化方法,在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: [
- //預覽圖片的設置
- // "",
- //],
- }) }
- $(document).ready(function () {
- var path = rootPath + "/lecturer/picture/upLoad.shtml";
- initFileInput("JSh_ZhP",path);
- $("#JSh_ZhP").on("fileuploaded", function (event, data, previewId, index) {
- $("#JSh_ZhP_Path").val(data.response);
- });
- });
後臺處理的代碼,我直接將文件存在了本地並將路徑返回。
[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的使用,如有問題請留言
閱讀更多 程序員小新人學習 的文章