[JAVA] Hochladen und Herunterladen von Dateien mit Ajax mit Spring Boot (ohne JQuery)
Zwei Dinge zu machen
- Laden Sie das Bild mit Ajax hoch, speichern Sie es auf dem Server und zeigen Sie es an
- Wählen Sie das anzuzeigende Bild aus und drücken Sie die Bildanzeigetaste, um es mit Ajax herunterzuladen und das Bild anzuzeigen.
Demo-Bildschirm
1. Datei hochladen
- Bildschirmseite
imageajax.HTML (Teil)
<body>
<h3>Datei-Upload</h3>
<form id="imageFormId">
<input type="file" name="inputFileName" />
<button type="button" onclick="uploadImage('imageFormId', 'myUploadedImageId')">Bild hochladen</button>
</form>
<img id="myUploadedImageId" style="width: 400px">
<script>
function uploadImage(imgForm, imgCtrl) {
const formData = new FormData(document.getElementById(imgForm));
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
//Zeigen Sie die Antwort als Bild an
img.src = url.createObjectURL(this.response);
}
}
request.open("POST", "/uploadimage");
request.responseType = 'blob';
request.send(formData);
}
</script>
</body>
- Controller-Seite
ImageAjaxController (Teil)
/**
*Datei-Upload
*/
@PostMapping("/uploadimage")
public ResponseEntity<byte[]> uploadImage(@RequestParam("inputFileName") final MultipartFile uploadFile) {
if (uploadFile.isEmpty()) {
return ResponseEntity.of(Optional.empty());
}
//Pfad zum Speichern hochgeladener Dateien abrufen
final Path path = Paths.get("c:/uploaddir", uploadFile.getOriginalFilename());
final byte[] bytes;
try {
//Holen Sie sich die Binärdatei der hochgeladenen Datei
bytes = uploadFile.getBytes();
//Dateispeicher
Files.write(path, bytes);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
- Die maximale Größe der hochzuladenden Datei beträgt 1 MB. Um eine größere Größe hochzuladen, gehen Sie wie folgt vor.
application.yml
spring:
servlet:
multipart:
max-file-size: 30MB
max-request-size: 30MB
2. Dateiauswahl
- Bildschirmseite
imageajax.HTML (Teil)
<body>
<h3>Dateiauswahl</h3>
<select id="selectImageId">
<option value="a">a</option>
<option value="b">b</option>
</select>
<button type="button" onclick="displayImage('selectImageId', 'mySelectedImageId')">Bildschirm</button>
<img id="mySelectedImageId" style="width: 400px">
<script>
function displayImage(selectCtrl, imgCtrl) {
const select = document.getElementById(selectCtrl);
const request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
const img = document.getElementById(imgCtrl);
const url = window.URL || window.webkitURL;
//Zeigen Sie die Antwort als Bild an
img.src = url.createObjectURL(this.response);
}
}
//Senden Sie eine Auswahl und holen Sie sich Dateien
request.open("GET", "/selectimage/" + select.value);
request.responseType = 'blob';
request.send();
}
</script>
</body>
- Controller-Seite
ImageAjaxController (Teil)
/**
*Dateiauswahl
*/
@GetMapping("/selectimage/{selectNum}")
public ResponseEntity<byte[]> getImage(@PathVariable final String selectNum) {
//Holen Sie sich den Dateinamen aus der Auswahl
final String fileName;
switch (selectNum) {
case "a":
fileName = "a.jpg ";
break;
case "b":
fileName = "b.jpg ";
break;
default:
return ResponseEntity.of(Optional.empty());
}
//Dateipfad
final Path path = Paths.get("c:/selectdir", fileName);
final byte[] bytes;
try {
//Lesen Sie die Datei
bytes = Files.readAllBytes(path);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
Recommended Posts