[JAVA] Téléchargement et téléchargement de fichiers à l'aide d'Ajax avec Spring Boot (sans JQuery)
Deux choses à faire
- Téléchargez l'image avec Ajax, stockez-la sur le serveur et affichez-la
- Sélectionnez l'image à afficher et appuyez sur le bouton d'affichage d'image pour la télécharger avec Ajax et afficher l'image.
Écran de démonstration
1. Téléchargement de fichiers
- Côté écran
imageajax.html (partie)
<body>
<h3>téléchargement de fichiers</h3>
<form id="imageFormId">
<input type="file" name="inputFileName" />
<button type="button" onclick="uploadImage('imageFormId', 'myUploadedImageId')">Téléchargement d'image</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;
//Afficher la réponse sous forme d'image
img.src = url.createObjectURL(this.response);
}
}
request.open("POST", "/uploadimage");
request.responseType = 'blob';
request.send(formData);
}
</script>
</body>
- Côté contrôleur
ImageAjaxController (partie)
/**
*téléchargement de fichiers
*/
@PostMapping("/uploadimage")
public ResponseEntity<byte[]> uploadImage(@RequestParam("inputFileName") final MultipartFile uploadFile) {
if (uploadFile.isEmpty()) {
return ResponseEntity.of(Optional.empty());
}
//Obtenir le chemin pour stocker les fichiers téléchargés
final Path path = Paths.get("c:/uploaddir", uploadFile.getOriginalFilename());
final byte[] bytes;
try {
//Obtenez le binaire du fichier téléchargé
bytes = uploadFile.getBytes();
//Stockage de fichiers
Files.write(path, bytes);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
- La taille maximale du fichier à télécharger est de 1 Mo, donc pour télécharger une taille plus grande, définissez comme suit.
application.yml
spring:
servlet:
multipart:
max-file-size: 30MB
max-request-size: 30MB
2. Sélection de fichiers
- Côté écran
imageajax.html (partie)
<body>
<h3>Sélection de fichiers</h3>
<select id="selectImageId">
<option value="a">a</option>
<option value="b">b</option>
</select>
<button type="button" onclick="displayImage('selectImageId', 'mySelectedImageId')">Affichage de l'image</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;
//Afficher la réponse sous forme d'image
img.src = url.createObjectURL(this.response);
}
}
//Envoyer des choix et obtenir des fichiers
request.open("GET", "/selectimage/" + select.value);
request.responseType = 'blob';
request.send();
}
</script>
</body>
- Côté contrôleur
ImageAjaxController (partie)
/**
*Sélection de fichiers
*/
@GetMapping("/selectimage/{selectNum}")
public ResponseEntity<byte[]> getImage(@PathVariable final String selectNum) {
//Obtenir le nom du fichier parmi les choix
final String fileName;
switch (selectNum) {
case "a":
fileName = "a.jpg ";
break;
case "b":
fileName = "b.jpg ";
break;
default:
return ResponseEntity.of(Optional.empty());
}
//Chemin du fichier
final Path path = Paths.get("c:/selectdir", fileName);
final byte[] bytes;
try {
//Lisez le dossier
bytes = Files.readAllBytes(path);
} catch (IOException e) {
return ResponseEntity.of(Optional.empty());
}
return ResponseEntity.ok(bytes);
}
Recommended Posts