[JAVA] Envoyez et traitez les données de formulaire au servlet avec l'objet FormData et le téléchargement de fichier Commons
1. Objet et spécifications
- Dans une application Web Java (Servlet, JSP), envoyez les informations (par exemple nom d'utilisateur, mot de passe, image) saisies dans le formulaire dans la JSP au serveur (Servlet) par requête HTTP.
- Vérifiez le contenu d'entrée avant d'envoyer le formulaire et ne l'envoyez pas s'il y a des lacunes. Par conséquent, un traitement dynamique est nécessaire
- Content-Type: Dans le cas de multipart / form-data Puisque les paramètres de demande ne peuvent pas être acquis par Servlet, une méthode pour acquérir des champs et des fichiers en même temps est nécessaire.
2. Méthode
- JavaScript --Traitement dynamique des données de formulaire avec l'objet FormData
- Servlet
- Traitez les données de formulaire reçues à l'aide du téléchargement de fichiers Apache Commons séparément dans des champs et des fichiers
3. Environnement et préparation
- Apache Tomcat 9.0
- commons-fileuploard-1.3.3.jar --Téléchargez commons-fileupload-1.3.3-bin.zip depuis http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi, décompressez et webContent commons-fileuploard-1.3.3.jar Placer dans / WEB-INF / lib
- Utilisez la dernière version 1.3.3 car des vulnérabilités ont été signalées dans le passé
- commons-io-2.6.jar --Téléchargez commons-io-2.6-bin.zip depuis http://commons.apache.org/proper/commons-io/download_io.cgi, décompressez et décompressez commons-io-2.6.jar vers WebContent / WEB-INF Mettre dans / lib
4. Mise en œuvre
sample.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample</title>
</head>
<body>
<form id="form">
Username : <input type="text" id="username" name="username"><br>
Password : <input type="password" id="password" name="password"><br>
Image : <input type="file" id="image" name="image" accept="image/*"><br>
<input type="submit" value="send">
</form>
</body>
<script type="text/javascript" src="sample.js"></script>
</html>
sample.js
//Créer un objet de formulaire
var form = document.getElementById("form");
//Que faire lorsque l'événement de soumission se produit
form.addEventListener("submit", function(event) {
//Supprimez la fonction par défaut du formulaire et gérez-la avec JavaScript
event.preventDefault();
check();
});
function check() {
//Récupérer la valeur du formulaire
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var image = document.getElementById("image").value;
//Envoyer si saisi
if (username != "" && password != "" && image != "") {
sendData();
} else {
alert("Please input all item.");
}
}
function sendData() {
//Création d'un objet FormData
var formData = new FormData(form);
//Envoyer une requête HTTP avec XMLHttpRequest
var req = new XMLHttpRequest();
//Traitement lorsque la transmission / réception est terminée
req.addEventListener("load", function(event) {
if (req.responseText == "done") {
//Traitement lorsque le traitement est réussi
alert("Succeeded.");
} else {
alert("Failed to send.");
}
});
//Traitement en cas d'échec de la transmission / réception
req.addEventListener("error", function(event) {
alert("Error");
});
//Paramètres de requête HTTP
req.open("POST", "/sample/SampleServlet"); // /Nom de l'application/Nom du servlet
//Envoyer une demande
req.send(formData);
}
SampleServlet.java
package controller;
import java.io.File;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
@WebServlet("/SampleServlet")
public class SampleServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public SampleServlet() {
super();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//Texte de la réponse
String responseText = "done";
//Créer ServletFileUpload à partir de DiskFileItemFactory
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
try {
//Stocker les données du formulaire de demande dans une liste
List list = sfu.parseRequest(request);
for (Object o : list) {
//Traitez chaque donnée de formulaire comme un FileItem
FileItem item = (FileItem) o;
//Branche selon que FileItem est un champ ou un fichier
if (item.isFormField()) {
//Pour les champs, obtenez le nom et la valeur du champ
// (Sous la forme<input name="Nom de domaine" value="Concents entrés")
String fieldName = item.getFieldName();
String value = item.getString();
if (fieldName.equals("username")) {
//Traitement du nom d'utilisateur
System.out.println("username : " + value);
} else if (fieldName.equals("password")){
//Traitement des mots de passe
System.out.println("password : " + value);
}
} else {
File file = new File(item.getName());
try {
String dirPath = "Destination de sauvegarde du fichier image";
String filePath = dirPath + File.separator + file.getName();
//Enregistrer le fichier image
item.write(new File(filePath));
} catch (IOException e) {
e.printStackTrace();
responseText = "error";
} catch (Exception e) {
e.printStackTrace();
responseText = "error";
}
}
}
} catch (FileUploadException e) {
e.printStackTrace();
responseText = "error";
}
//Envoyer une réponse
response.getWriter().print(responseText);
}
}
6. Résultat
Si non entré
Lorsque tous les éléments sont saisis
5. Référence
JavaScript
- XMLHttpRequest : https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
- Objets FormData: https://developer.mozilla.org/ja/docs/Web/Guide/Using_FormData_Objects
Servlet
- commons fileUpload
- http://commons.apache.org/proper/commons-fileupload/using.html
- https://www.javadrive.jp/servlet/fileupload_tutorial/index4.html
- https://www.javadrive.jp/servlet/fileupload_tutorial/index5.html
- http://www.ne.jp/asahi/hishidama/home/tech/apache/commons/fileup.html
Recommended Posts