Bootstrap FileInput implementiert Bild-Upload-Funktion

<div Klasse="Formulargruppe">
 <label class="col-sm-2 control-label">Bild</label>
 <div Klasse="col-sm-8">
  <input id="filesInput" type="file" mehrere Daten-Durchsuchen-bei-Zonen-Klick="true" class="file-loading" accept="image/*" />
  <input id="resources" name="resources" th:value="${record.picUrls}" type="hidden">//Hochgeladenen Bildpfad abrufen, $("#filesInput").val() kann ihn nicht abrufen, verwenden Sie versteckte Eingabe, um ihn abzurufen</div>
</div>

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

var List = new Array(); //Definieren Sie eine globale Variable, die den Dateinamen und die ID akzeptiert
$(Funktion () {
 var picStr = [
http:...,
http:....
];
var picStrConfig = [
{Beschriftung: "11111", Breite: "120px", Datei-ID: "123456", URL: "deleteData", Typ: "Bild", Schlüssel: "1"},
........
];
$('#filesInput').fileinput({
 Thema: 'fas',
 Sprache: 'zh',
 Upload-URL: ctx + 'Fahrrad/Aufzeichnung/Upload-Daten',
 uploadAsync: true, // Standardmäßiger asynchroner Upload showUpload: true, // Ob die Upload-Schaltfläche angezeigt werden soll overwriteInitial: false,
 showRemove: false, //Zeige die Schaltfläche „Entfernen“// showPreview: true, //Zeige eine Vorschau oder nicht showCaption: false, //Zeige einen Titel oder nicht browseClass: „btn btn-primary“, //Stil der Schaltfläche dropZoneEnabled: false, //Zeige die Drag-Zone oder nicht maxFileCount: 5, //Gibt die maximale Anzahl von Dateien an, die gleichzeitig hochgeladen werden können enctype: „multipart/form-data“,
 validateInitialCount:true,
 Layoutvorlagen: {actionUpload: ''},
 maxFilesNum: 5,
 Dateityp: "any",
 allowedPreviewTypes: ['Bild'],
 Vorschaudateisymbol: "<i class='glyphicon glyphicon-king'></i>",
 initialPreviewAsData: wahr,
 initialPreview: picStr, //Initialisiere den Echo-Bildpfad initialPreviewConfig: picStrConfig //Konfiguriere einige Parameter in der Vorschau}).on("fileuploaded", function (event, data, previewId, index) {
 var Antwort = Daten.Antwort;
 var filePath = data.response.filePath; //Der Dateiname, der zurückgegeben wird, nachdem die Datei erfolgreich hochgeladen wurde. Sie können einen benutzerdefinierten Dateinamen zurückgeben List.push({ FileName: filePath, KeyID: previewId })
 // Alarm (Antwort.Dateipfad);
 // $("#fileMd5").val(response.fileMd5);
 // $("#version").val(response.newVersionName);
 var Ressourcen = $('#Ressourcen').val();
 wenn (!Ressourcen){
  $("#Ressourcen").val(response.filePath);
 }anders{
  $("#Ressourcen").val(Ressourcen+"^_^"+response.filePath);
 }
 
 
}).on('filepredelete', function(event, data, previewId, index) { //Aktion vor dem Löschen des Originalbilds auslösen}).on('filedeleted',function (event, data, previewId, index) {//Aktion nach dem Löschen des Originalbildsvar resources = $("#resources").val();
 var Antwort = Vorschau-ID.ResponseJSON;
 wenn(Antwortcode == 0){
  var deleteName = "/"+data;
  wenn(resources.indexOf("^_^"+deleteName)>-1){
   $("#resources").val("^_^"+resources.replace(deleteName,""));
   Ressourcen = $("#Ressourcen").val();
  }
  wenn(Ressourcen.indexOf(deleteName+"^_^")>-1){
   $("#resources").val(resources.replace(deleteName+"^_^",""));
   Ressourcen = $("#Ressourcen").val();
  }
  wenn (Ressourcen.indexOf(deleteName)>-1){
   $("#resources").val(resources.replace(deleteName,""));
   Ressourcen = $("#Ressourcen").val();
  }
 }
}).on('filepreupload', Funktion(Ereignis, Daten, Vorschau-ID, Index) {
 var form = data.form, files = data.files, extra = data.extra,
  Antwort = Daten.Antwort, Leser = Daten.Leser;
}).on("filesuccessremove", Funktion (Ereignis, Daten, Vorschau-ID, Index) {
 var Ressourcen = $("#Ressourcen").val();
 für (var i = 0; i < Listenlänge; i++) {
  wenn (Liste[i].SchlüsselID == Daten) {
   wenn(resources.indexOf("^_^"+List[i].FileName)>-1){
    $("#resources").val("^_^"+resources.replace(Liste[i].FileName,""));
    Ressourcen = $("#Ressourcen").val();
   }
   wenn(Ressourcen.indexOf(Liste[i].FileName+"^_^")>-1){
    $("#resources").val(resources.replace(Liste[i].FileName+"^_^",""));
    Ressourcen = $("#Ressourcen").val();
   }
   wenn(Ressourcen.indexOf(Liste[i].FileName)>-1){
    $("#resources").val(resources.replace(Liste[i].FileName,""));
    Ressourcen = $("#Ressourcen").val();
   }
   Liste[i].SchlüsselID = "1"
  }
 }
});
})

/**
  * Datei hochladen */
 @RequestMapping("/uploadData")
 @AntwortBody
 öffentliche Map<String, Object> uploadData(HttpServletRequest-Anforderung, HttpServletResponse-Antwort) löst Exception aus{
  request.setCharacterEncoding("UTF-8");
  Map<String, Objekt> json = neue HashMap<String, Objekt>();
  MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) Anfrage;
 
  /** Dateistream der Seitensteuerung* */
  MultipartFile multipartFile = null;
  Karte map = multipartRequest.getFileMap();
  für (Iterator i = map.keySet().iterator(); i.hasNext();) {
   Objekt obj = i.next();
   multipartFile=(Mehrteilige Datei) map.get(obj);
 
  }
  /** Dateisuffix abrufen * */
  Zeichenfolge Dateiname = multipartFile.getOriginalFilename();
 
  Eingabestream Eingabestream;
  Zeichenfolgenpfad = "";
  Zeichenfolge fileMd5 = "";
  versuchen {
   /**Laden Sie die Datei in das Repository hoch **/
   inputStream = multipartFile.getInputStream();
   Datei tmpFile = File.createTempFile(Dateiname,
   Dateiname.Teilzeichenfolge(Dateiname.letzterIndexvon(".")));
   fileMd5 = Dateien.hash(tmpFile, Hashing.md5()).toString();
   : FileUtils.copyInputStreamToFile(Eingabestream, temporäre Datei);
   /** Auf MinIO hochladen**/
   Pfad = minioFileUtil.uploadCustomize(multipartFile.getInputStream(), Dateiname.Substring(Dateiname.letzterIndexvon(".")), "",multipartFile.getContentType());
   /** Auf Alibaba Cloud OSS hochladen **/
// Pfad = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"Fahrrad");
   tmpFile.delete();
 
  } Fang (Ausnahme e) {
   e.printStackTrace();
   logger.error("Hochladen fehlgeschlagen",e);
   json.put("fileMd5", fileMd5);
   json.put("message", "Hochladen fehlgeschlagen");
   json.put("status", falsch);
   json.put("Dateipfad", Pfad);
   gib JSON zurück;
  }
  json.put("fileMd5", fileMd5);
  json.put("message", "Upload erfolgreich");
  json.put("status", wahr);
  json.put("Dateipfad", Pfad);
  json.put("Schlüssel", UUIDGenerator.getUUID());
  gib JSON zurück;
 }

/**
 * Datei Datei löschen */
@RequestMapping("/edit/deleteData/{id}")
@AntwortBody
@Transactional(rollbackFor = Ausnahme.Klasse)
öffentliches AjaxResult deleteData(@PathVariable("id")String id, HttpServletRequest Anfrage) löst Exception aus{
 Zeichenfolgenschlüssel = request.getParameter("Schlüssel");
 Datensatz Datensatz = recordService.getById(id);
 String picUrls = Datensatz.getPicUrls();
 String deleteName = "/" + Schlüssel;
 wenn (picUrls.indexOf("^_^" + deleteName) > -1) {
  picUrls = "^_^" + picUrls.replace(deleteName, "");
 }
 wenn (picUrls.indexOf(deleteName + "^_^") > -1) {
  picUrls = picUrls.replace(deleteName + "^_^", "");
 }
 wenn (picUrls.indexOf(deleteName) > -1) {
  picUrls = picUrls.replace(deleteName, "");
 }
 Datensatz.setPicUrls(picUrls);
 if (recordMapper.updatePicsById(record) == 1) { /** Löschen Sie zuerst den Bildpfad in der Datenbank und löschen Sie dann die Quelldatei, in der das Bild gespeichert ist. **/
  minioUtil.removeObject(bucketName, Schlüssel);
  gib Erfolg zurück (Schlüssel);
 }
 Fehler zurückgeben();
}

self._handler($el, 'klicken', funktion () {
  wenn (!self._validateMinCount()) {
   gibt false zurück;
  }
  self.ajaxAborted = false;
  self._raise('filebeforedelete', [vKey, extraData]);
  //keine Inspektion JSUnresolvedVariable,JSHint
  $.modal.confirm("Möchten Sie die Originaldatei wirklich löschen? Sie kann nach dem Löschen nicht wiederhergestellt werden", Funktion () { // Initialisieren Sie das zurückgegebene Bild und öffnen Sie beim Löschen ein Eingabeaufforderungsfeld zur Bestätigung.
  wenn (self.ajaxAborted-Instanz von Promise) {
   self.ajaxAborted.then(Funktion (Ergebnis) {
    wenn (!Ergebnis) {
     $.ajax(Einstellungen);
    }
   });
  } anders {
   wenn (!self.ajaxAborted) {
    $.ajax(Einstellungen);
   }
  }
  })
 });
});