整合前的準備步驟
1.搭建好基礎框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，這里的過程就不在本文中講了，之前我做個一個demo(ssm整合+用戶模塊)，可以參考這個搭建好。
2.下載bootstrap fileinput組件源碼：
https://github.com/kartik-v/bootstrap-fileinput/
搭建后的效果圖
圖1.
圖2.
圖3.
圖4.
圖5.
在需要編寫的jsp頁面引入組件
本工程的路徑界面如下：
在jsp引入組件需要的js,css，如下代碼:
<!-- jq --><script type="text/javascript" src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script><!-- bootstrap --><link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css" rel="external nofollow" ><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script><link href="<%=basePath%>css/xlstyle.css" rel="external nofollow" rel="stylesheet"><!-- 圖片上傳即使預覽插件 --><link rel="stylesheet" href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css" rel="external nofollow" ><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script> <!-- 這個是漢化--><script type="text/javascript" src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>
引入組件，這里以我自己寫的網站為例：
<form class="form-horizontal" role="form" method="post" action="<%=basePath%>addArticle" enctype="multipart/form-data"> <div class="form-group"> <label class="col-sm-2 control-label">菜譜名稱</label> <div class="col-sm-10"> <input type="text" name="describ" class="col-sm-10 form-control" placeholder="菜譜名稱"> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">菜譜封面</label> <div class="col-sm-10"> <input type="file" name="myfile" data-ref="url2" class="col-sm-10 myfile" value="" /> <input type="hidden" name="url2" value=""> </div> </div>
還有需要配置組件的詳細js，我這里是放在了標簽結束的后面：
以上省略
.........
</body><script type="text/javascript"> $(".myfile").fileinput({ //上傳的地址 uploadUrl:"<%=basePath%>food/uploadFile", uploadAsync : true, //默認異步上傳 showUpload : false, //是否顯示上傳按鈕,跟隨文本框的那個 showRemove : false, //顯示移除按鈕,跟隨文本框的那個 showCaption : true,//是否顯示標題,就是那個文本框 showPreview : true, //是否顯示預覽,不寫默認為true dropZoneEnabled : false,//是否顯示拖拽區域，默認不寫為true，但是會占用很大區域 //minImageWidth: 50, //圖片的最小寬度 //minImageHeight: 50,//圖片的最小高度 //maxImageWidth: 1000,//圖片的最大寬度 //maxImageHeight: 1000,//圖片的最大高度 //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小 //minFileCount: 0, maxFileCount : 1, //表示允許同時上傳的最大文件個數 enctype : 'multipart/form-data', validateInitialCount : true, previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", msgFilesTooMany : "選擇上傳的文件數量({n}) 超過允許的最大數值{m}！", allowedFileTypes : [ 'image' ],//配置允許文件上傳的類型 allowedPreviewTypes : [ 'image' ],//配置所有的被預覽文件類型 allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被預覽的所有mime類型 language : 'zh' }) //異步上傳返回結果處理 $('.myfile').on('fileerror', function(event, data, msg) { console.log("fileerror"); console.log(data); }); //異步上傳返回結果處理 $(".myfile").on("fileuploaded", function(event, data, previewId, index) { console.log("fileuploaded"); var ref = $(this).attr("data-ref"); $("input[name='" + ref + "']").val(data.response.url); }); //同步上傳錯誤處理 $('.myfile').on('filebatchuploaderror', function(event, data, msg) { console.log("filebatchuploaderror"); console.log(data); }); //同步上傳返回結果處理 $(".myfile").on("filebatchuploadsuccess", function(event, data, previewId, index) { console.log("filebatchuploadsuccess"); console.log(data); }); //上傳前 $('.myfile').on('filepreupload', function(event, data, previewId, index) { console.log("filepreupload"); });</script>配置tomcat的虛擬路徑
如題,本次圖片上傳是要上傳到服務器上別的磁盤位置，比如我的電腦作為服務器來說，一般情況下用tomcat上傳圖片只能上傳到項目的某文件夾中，所以這里我們需要配置tomcat來打開tomcat的虛擬路徑，讓tomcat可以映射到本地磁盤的路徑上。操作如下圖：
1.雙擊這里
2.點擊我畫圈的地方
3.配置tomcat的虛擬路徑
path:也就是我們tomcat的虛擬訪問路徑，Documnet Base是我們實際本地磁盤需要被映射的路徑。
SpringMVC的Controller層編寫
@Controller@RequestMapping("/food")public class PictureController { // uploadFile @RequestMapping("/uploadFile") @ResponseBody public Map<String, Object> uploadFile(MultipartFile myfile) throws IllegalStateException, IOException { // 原始名稱 String oldFileName = myfile.getOriginalFilename(); // 獲取上傳文件的原名// System.out.println(oldFileName); // 存儲圖片的虛擬本地路徑（這里需要配置tomcat的web模塊路徑，雙擊貓進行配置） String saveFilePath = "E://picture"; // 上傳圖片 if (myfile != null && oldFileName != null && oldFileName.length() > 0) { // 新的圖片名稱 String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf(".")); // 新圖片 File newFile = new File(saveFilePath + "http://" + newFileName); // 將內存中的數據寫入磁盤 myfile.transferTo(newFile); // 將新圖片名稱返回到前端 Map<String, Object> map = new HashMap<String, Object>(); map.put("success", "成功啦"); map.put("url", newFileName); return map; } else { Map<String, Object> map = new HashMap<String, Object>(); map.put("error", "圖片不合法"); return map; } }}寫完后直接訪問Controller層配置的路徑，即可成功，最終效果如前面的效果圖一樣。
以上所述是小編給大家介紹的bootstrap fileinput組件整合Springmvc上傳圖片到本地磁盤，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
