Bootstrap FileInputは画像アップロード機能を実装します

<div class="フォームグループ">
 <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() では取得できないため、hidden input を使用して取得します</div>
</div>

<link href="/ajax/libs/bootstrap-fileinput/fileinput.css" rel="スタイルシート" 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>

var List = new Array(); //ファイル名とIDを受け入れるグローバル変数を定義する
$(関数() {
 var picStr = [
http:...,
http:.... です。
];
var picStrConfig = [
{キャプション: "11111", 幅: "120px", ファイルID: "123456", URL: "deleteData", タイプ: "image", キー: "1"},
........
];
$('#filesInput').ファイル入力({
 テーマ: 'fas'、
 言語: 'zh',
 アップロード URL: 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',
 検証初期カウント:true、
 レイアウトテンプレート: {actionUpload: ''},
 最大ファイル数: 5,
 ファイルタイプ: "任意",
 許可されたプレビュータイプ: ['画像'],
 プレビューファイルアイコン: "<i class='glyphicon glyphicon-king'></i>",
 初期プレビューデータ: true、
 initialPreview: picStr, //エコー画像パスを初期化 initialPreviewConfig: picStrConfig //プレビューのパラメータをいくつか設定}).on("fileuploaded", function (event, data, previewId, index) {
 var レスポンス = data.response;
 var filePath = data.response.filePath; // ファイルが正常にアップロードされた後に返されるファイル名。カスタムファイル名を返すこともできます。List.push({ FileName: filePath, KeyID: previewId })
 // アラート(response.filePath);
 // $("#fileMd5").val(response.fileMd5);
 // $("#version").val(response.newVersionName);
 var リソース = $('#resources').val();
 if (!リソース){
  $("#resources").val(レスポンス.filePath);
 }それ以外{
  $("#resources").val(resources+"^_^"+response.filePath);
 }
 
 
}).on('filepredelete', function(event, data, previewId, index) { //元の画像を削除する前にアクションをトリガーします}).on('filedeleted',function (event, data, previewId, index){//元の画像を削除した後のアクションvar resources = $("#resources").val();
 var レスポンス = previewId.responseJSON;
 if(レスポンスコード == 0){
  var deleteName = "/"+データ;
  if(resources.indexOf("^_^"+deleteName)>-1){
   $("#resources").val("^_^"+resources.replace(deleteName,""));
   リソース = $("#resources").val();
  }
  if(resources.indexOf(deleteName+"^_^")>-1){
   $("#resources").val(resources.replace(deleteName+"^_^",""));
   リソース = $("#resources").val();
  }
  (resources.indexOf(deleteName)>-1)の場合{
   $("#resources").val(resources.replace(deleteName,""));
   リソース = $("#resources").val();
  }
 }
}).on('filepreupload', 関数(イベント、データ、プレビューID、インデックス) {
 var フォーム = data.form、ファイル = data.files、追加 = data.extra、
  レスポンス = data.response、リーダー = data.reader;
}).on("filesuccessremove", 関数(イベント、データ、プレビューID、インデックス) {
 var リソース = $("#resources").val();
 (var i = 0; i < List.length; i++) の場合 {
  リスト[i].KeyID == データの場合{
   if(resources.indexOf("^_^"+List[i].FileName)>-1){
    $("#resources").val("^_^"+resources.replace(List[i].FileName,""));
    リソース = $("#resources").val();
   }
   if(resources.indexOf(List[i].FileName+"^_^")>-1){
    $("#resources").val(resources.replace(List[i].FileName+"^_^",""));
    リソース = $("#resources").val();
   }
   if(resources.indexOf(List[i].FileName)>-1){
    $("#resources").val(resources.replace(List[i].FileName,""));
    リソース = $("#resources").val();
   }
   リスト[i].KeyID = "1"
  }
 }
});
})

/**
  * ファイルをアップロード */
 @RequestMapping("/アップロードデータ")
 @レスポンス本文
 public Map<String, Object> uploadData(HttpServletRequest リクエスト、HttpServletResponse レスポンス) 例外をスローします{
  リクエスト.setCharacterEncoding("UTF-8");
  Map<String, Object> json = new HashMap<String, Object>();
  マルチパートHttpServletRequest マルチパートリクエスト = (マルチパートHttpServletRequest) リクエスト;
 
  /** ページコントロールのファイルストリーム * */
  マルチパートファイル multipartFile = null;
  マップ map =multipartRequest.getFileMap();
  (イテレータ i = map.keySet().iterator(); i.hasNext();) {
   オブジェクト obj = i.next();
   multipartFile=(マルチパートファイル) map.get(obj);
 
  }
  /** ファイルのサフィックスを取得します * */
  文字列ファイル名 = multipartFile.getOriginalFilename();
 
  入力ストリーム 入力ストリーム;
  文字列パス = "";
  文字列 fileMd5 = "";
  試す {
   /** ファイルをリポジトリにアップロードする **/
   入力ストリーム = multipartFile.getInputStream();
   ファイル tmpFile = File.createTempFile(ファイル名,
   ファイル名.substring(ファイル名.lastIndexOf(".")));
   fileMd5 = Files.hash(tmpFile, Hashing.md5()).toString();
   FileUtils.copyInputStreamToFile(入力ストリーム、tmpFile);
   /** MinIO にアップロード**/
   パス = minioFileUtil.uploadCustomize(multipartFile.getInputStream(), filename.substring(filename.lastIndexOf(".")), "",multipartFile.getContentType());
   /** Alibaba Cloud OSS にアップロード **/
// パス = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"bike");
   tmpFile を削除します。
 
  } キャッチ (例外 e) {
   e.printStackTrace();
   logger.error("アップロードに失敗しました",e);
   json.put("fileMd5", fileMd5);
   json.put("message", "アップロードに失敗しました");
   json.put("ステータス", false);
   json.put("ファイルパス", パス);
   json を返します。
  }
  json.put("fileMd5", fileMd5);
  json.put("message", "アップロードに成功しました");
  json.put("ステータス", true);
  json.put("ファイルパス", パス);
  json.put("キー", UUIDGenerator.getUUID());
  json を返します。
 }

/**
 * ファイルファイルを削除する */
@RequestMapping("/edit/deleteData/{id}")
@レスポンス本文
@Transactional(ロールバックFor = Exception.class)
public AjaxResult deleteData(@PathVariable("id")String id、HttpServletRequest リクエスト) 例外がスローされます{
 文字列キー = request.getParameter("key");
 レコード record = recordService.getById(id);
 文字列 picUrls = record.getPicUrls();
 文字列deleteName = "/" + キー;
 (picUrls.indexOf("^_^" + deleteName) > -1) の場合 {
  picUrls = "^_^" + picUrls.replace(deleteName, "");
 }
 (picUrls.indexOf(deleteName + "^_^") > -1) の場合 {
  picUrls = picUrls.replace(deleteName + "^_^", "");
 }
 picUrls.indexOf(deleteName) > -1 の場合 {
  picUrls = picUrls.replace(deleteName, "");
 }
 レコードを設定します。
 if (recordMapper.updatePicsById(record) == 1) { /** 最初にデータベース内の画像パスを削除し、次に画像が保存されているソースファイルを削除します。 **/
  minioUtil.removeObject(バケット名、キー);
  success(キー)を返します。
 }
 エラーを返します();
}

self._handler($el, 'click', 関数() {
  （！self._validateMinCount()）の場合{
   false を返します。
  }
  self.ajaxAborted = false;
  self._raise('filebeforedelete', [vKey, extraData]);
  //検査なし JSUnresolvedVariable、JSHint
  $.modal.confirm("元のファイルを削除してもよろしいですか? 削除後は復元できません",function () { // エコーされた画像を初期化し、削除時に確認するためのプロンプト ボックスをポップアップ表示します。
  if (self.ajaxAborted インスタンスの Promise) {
   self.ajaxAborted.then(関数 (結果) {
    if (!結果) {
     $.ajax(設定);
    }
   });
  } それ以外 {
   もし(!self.ajaxAborted) {
    $.ajax(設定);
   }
  }
  })
 });
});