本文例項為大家分享了Bootstrap FileInput實現圖片上傳功能的具體程式碼，供大家參考，具體內容如下

html程式碼：

<div class="form-group">
 <label class="col-sm-2 control-label">圖片</label>
 <div class="col-sm-8">
  <input id="filesInput" type="file" multiple data-browse-on-zone-click="true" class="file-loading" accept="image/*" />
  <input id="resources" name="resources" th:value="${record.picUrls}" type="hidden">//獲取上傳的圖片路徑，$("#filesInput").val()獲取不到，用隱藏的input來獲取
 </div>
</div>

引入js和css檔案

<link href="/ajax/libs/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.js}"></script>

js程式碼：

var List = new Array();//定義一個全域性變數去接受檔名和id
$(function () {
 var picStr = [
http:...,http:....
];
var picStrConfig = [
{caption: "11111",width: "120px",fileid:"123456",url: "deleteData",type:"image",key: "1"},........
];
$('#filesInput').fileinput({
 theme: 'fas',language: 'zh',uploadUrl: ctx + 'bike/record/uploadData',uploadAsync: true,//預設非同步上傳
 showUpload: true,//是否顯示上傳按鈕
 overwriteInitial: false,showRemove : false,//顯示移除按鈕
 // showPreview : true,//是否顯示預覽
 showCaption: false,//是否顯示標題
 browseClass: "btn btn-primary",//按鈕樣式
 dropZoneEnabled: false,//是否顯示拖拽區域
 maxFileCount: 5,//表示允許同時上傳的最大檔案個數
 enctype: 'multipart/form-data',validateInitialCount:true,layoutTemplates: {actionUpload: ''},maxFilesNum: 5,fileType: "any",allowedPreviewTypes: ['image'],previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",initialPreviewAsData: true,initialPreview: picStr,//初始化回顯圖片路徑
 initialPreviewConfig: picStrConfig //配置預覽中的一些引數
 
}).on("fileuploaded",function (event,data,previewId,index) {
 var response = data.response;
 var filePath = data.response.filePath; //檔案上傳成功返回的檔名，可返回自定義檔名
 List.push({ FileName: filePath,KeyID: previewId })
 // alert(response.filePath);
 // $("#fileMd5").val(response.fileMd5);
 // $("#version").val(response.newVersionName);
 var resources = $('#resources').val();
 if (!resources){
  $("#resources").val(response.filePath);
 }else{
  $("#resources").val(resources+"^_^"+response.filePath);
 }
 
 
}).on('filepredelete',function(event,index) { //刪除原圖片之前的觸發動作
 
 
}).on('filedeleted',index) {//刪除原圖片之後的動作
 var resources = $("#resources").val();
 var respone = previewId.responseJSON;
 if(respone.code == 0){
  var deleteName = "/"+data;
  if(resources.indexOf("^_^"+deleteName)>-1){
   $("#resources").val("^_^"+resources.replace(deleteName,""));
   resources = $("#resources").val();
  }
  if(resources.indexOf(deleteName+"^_^")>-1){
   $("#resources").val(resources.replace(deleteName+"^_^",""));
   resources = $("#resources").val();
  }
  if(resources.indexOf(deleteName)>-1){
   $("#resources").val(resources.replace(deleteName,""));
   resources = $("#resources").val();
  }
 }
}).on('filepreupload',index) {
 var form = data.form,files = data.files,extra = data.extra,response = data.response,reader = data.reader;
}).on("filesuccessremove",index) {
 var resources = $("#resources").val();
 for (var i = 0; i < List.length; i++) {
  if (List[i].KeyID == data) {
   if(resources.indexOf("^_^"+List[i].FileName)>-1){
    $("#resources").val("^_^"+resources.replace(List[i].FileName,""));
    resources = $("#resources").val();
   }
   if(resources.indexOf(List[i].FileName+"^_^")>-1){
    $("#resources").val(resources.replace(List[i].FileName+"^_^",""));
    resources = $("#resources").val();
   }
   if(resources.indexOf(List[i].FileName)>-1){
    $("#resources").val(resources.replace(List[i].FileName,""));
    resources = $("#resources").val();
   }
   List[i].KeyID = "1"
  }
 }
})；
})

java程式碼：

/**
  * 上傳檔案
*/
 @RequestMapping("/uploadData")
 @ResponseBody
 public Map<String,Object> uploadData(HttpServletRequest request,HttpServletResponse response) throws Exception{
  request.setCharacterEncoding("UTF-8");
  Map<String,Object> json = new HashMap<String,Object>();
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
 
  /** 頁面控制元件的檔案流* */
  MultipartFile multipartFile = null;
  Map map =multipartRequest.getFileMap();
  for (Iterator i = map.keySet().iterator(); i.hasNext();) {
   Object obj = i.next();
   multipartFile=(MultipartFile) map.get(obj);
 
  }
  /** 獲取檔案的字尾* */
  String filename = multipartFile.getOriginalFilename();
 
  InputStream inputStream;
  String path = "";
  String fileMd5 = "";
  try {
   /** 檔案上傳到儲存庫中 **/
   inputStream = multipartFile.getInputStream();
   File tmpFile = File.createTempFile(filename,filename.substring(filename.lastIndexOf(".")));
   fileMd5 = Files.hash(tmpFile,Hashing.md5()).toString();
   FileUtils.copyInputStreamToFile(inputStream,tmpFile);
   /** 上傳到 MinIO上 **/
   path = minioFileUtil.uploadCustomize(multipartFile.getInputStream(),filename.substring(filename.lastIndexOf(".")),"",multipartFile.getContentType());
   /** 上傳 到 阿里雲oss **/
//   path = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"bike");
   tmpFile.delete();
 
  } catch (Exception e) {
   e.printStackTrace();
   logger.error("上傳失敗",e);
   json.put("fileMd5",fileMd5);
   json.put("message","上傳失敗");
   json.put("status",false);
   json.put("filePath",path);
   return json;
  }
  json.put("fileMd5",fileMd5);
  json.put("message","上傳成功");
  json.put("status",true);
  json.put("filePath",path);
  json.put("key",UUIDGenerator.getUUID());
  return json;
 }

/**
 * 刪除檔案檔案
 */
@RequestMapping("/edit/deleteData/{id}")
@ResponseBody
@Transactional(rollbackFor = Exception.class)
public AjaxResult deleteData(@PathVariable("id")String id,HttpServletRequest request) throws Exception{
 String key = request.getParameter("key");
 Record record = recordService.getById(id);
 String picUrls = record.getPicUrls();
 String deleteName = "/" + key;
 if (picUrls.indexOf("^_^" + deleteName) > -1) {
  picUrls = "^_^" + picUrls.replace(deleteName,"");
 }
 if (picUrls.indexOf(deleteName + "^_^") > -1) {
  picUrls = picUrls.replace(deleteName + "^_^","");
 }
 if (picUrls.indexOf(deleteName) > -1) {
  picUrls = picUrls.replace(deleteName,"");
 }
 record.setPicUrls(picUrls);
 if (recordMapper.updatePicsById(record) == 1) { /** 先刪除資料庫中的圖片路徑 再刪除圖片儲存的原始檔。**/
  minioUtil.removeObject(bucketName,key);
  return success(key);
 }
 return error();
}

修改 fileInput 原始碼：

self._handler($el,'click',function () {
  if (!self._validateMinCount()) {
   return false;
  }
  self.ajaxAborted = false;
  self._raise('filebeforedelete',[vKey,extraData]);
  //noinspection JSUnresolvedVariable,JSHint
  $.modal.confirm("確定刪除原檔案？刪除後不可恢復",function () { //初始化回顯的圖片在刪除時彈出提示框確認。
  if (self.ajaxAborted instanceof Promise) {
   self.ajaxAborted.then(function (result) {
    if (!result) {
     $.ajax(settings);
    }
   });
  } else {
   if (!self.ajaxAborted) {
    $.ajax(settings);
   }
  }
  })
 });
});

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。