bootstrap中fileinput組件整合Springmvc上傳圖片到本地磁盤的示例分析

小編給大家分享一下bootstrap中fileinput組件整合Springmvc上傳圖片到本地磁盤的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

整合前的準(zhǔn)備步驟

1.搭建好基礎(chǔ)框架，本文用的是SSM(Spring+SpringMVC+Mybatis)，這里的過程就不在本文中講了，之前我做個(gè)一個(gè)demo(ssm整合+用戶模塊)，可以參考這個(gè)搭建好。

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">
<!-- 圖片上傳即使預(yù)覽插件 -->
<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>
 <!-- 這個(gè)是漢化-->
<script type="text/javascript"
 src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>

引入組件，這里以我自己寫的網(wǎng)站為例：

<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>

還有需要配置組件的詳細(xì)js，我這里是放在了標(biāo)簽結(jié)束的后面：

以上省略

.........

</body>
<script type="text/javascript">
 $(".myfile").fileinput({
  //上傳的地址
  uploadUrl:"<%=basePath%>food/uploadFile",
  uploadAsync : true, //默認(rèn)異步上傳
  showUpload : false, //是否顯示上傳按鈕,跟隨文本框的那個(gè)
  showRemove : false, //顯示移除按鈕,跟隨文本框的那個(gè)
  showCaption : true,//是否顯示標(biāo)題,就是那個(gè)文本框
  showPreview : true, //是否顯示預(yù)覽,不寫默認(rèn)為true
  dropZoneEnabled : false,//是否顯示拖拽區(qū)域，默認(rèn)不寫為true，但是會(huì)占用很大區(qū)域
  //minImageWidth: 50, //圖片的最小寬度
  //minImageHeight: 50,//圖片的最小高度
  //maxImageWidth: 1000,//圖片的最大寬度
  //maxImageHeight: 1000,//圖片的最大高度
  //maxFileSize: 0,//單位為kb，如果為0表示不限制文件大小
  //minFileCount: 0,
  maxFileCount : 1, //表示允許同時(shí)上傳的最大文件個(gè)數(shù)
  enctype : 'multipart/form-data',
  validateInitialCount : true,
  previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
  msgFilesTooMany : "選擇上傳的文件數(shù)量({n}) 超過允許的最大數(shù)值{m}！",
  allowedFileTypes : [ 'image' ],//配置允許文件上傳的類型
  allowedPreviewTypes : [ 'image' ],//配置所有的被預(yù)覽文件類型
  allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被預(yù)覽的所有mime類型
  language : 'zh'
 })
 //異步上傳返回結(jié)果處理
 $('.myfile').on('fileerror', function(event, data, msg) {
  console.log("fileerror");
  console.log(data);
 });
 //異步上傳返回結(jié)果處理
 $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
  console.log("fileuploaded");
  var ref = $(this).attr("data-ref");
  $("input[name='" + ref + "']").val(data.response.url);
 });
 //同步上傳錯(cuò)誤處理
 $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
  console.log("filebatchuploaderror");
  console.log(data);
 });
 //同步上傳返回結(jié)果處理
 $(".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的虛擬路徑

如題,本次圖片上傳是要上傳到服務(wù)器上別的磁盤位置，比如我的電腦作為服務(wù)器來說，一般情況下用tomcat上傳圖片只能上傳到項(xiàng)目的某文件夾中，所以這里我們需要配置tomcat來打開tomcat的虛擬路徑，讓tomcat可以映射到本地磁盤的路徑上。操作如下圖：

1.雙擊這里

2.點(diǎn)擊我畫圈的地方

3.配置tomcat的虛擬路徑

path:也就是我們tomcat的虛擬訪問路徑，Documnet Base是我們實(shí)際本地磁盤需要被映射的路徑。

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);
  // 存儲(chǔ)圖片的虛擬本地路徑（這里需要配置tomcat的web模塊路徑，雙擊貓進(jìn)行配置）
  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 + "\\" + newFileName);
   // 將內(nèi)存中的數(shù)據(jù)寫入磁盤
   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上傳圖片到本地磁盤的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！