[JAVA] Senden und verarbeiten Sie Formulardaten mit FormData-Objekt und Commons File Upload an Servlet
1. Zweck und Spezifikationen
- Senden Sie in einer Java-Webanwendung (Servlet, JSP) die im Formular in der JSP eingegebenen Informationen (z. B. Benutzername, Kennwort, Bild) per HTTP-Anforderung an den Server (Servlet).
- Überprüfen Sie den Eingabeinhalt, bevor Sie das Formular senden, und senden Sie ihn nicht, wenn Mängel vorliegen. Daher ist eine dynamische Verarbeitung erforderlich
- Inhaltstyp: Bei mehrteiligen / Formulardaten Da Anforderungsparameter nicht von Servlet erfasst werden können, ist eine Methode zum gleichzeitigen Erfassen von Feldern und Dateien erforderlich.
2. Methode
- JavaScript
- Dynamische Verarbeitung von Formulardaten mit FormData-Objekt
- Servlet
- Verarbeiten Sie die mit Apache Commons File Upload empfangenen Formulardaten separat in Felder und Dateien
3. Umwelt und Vorbereitung
- Apache Tomcat 9.0
- commons-fileuploard-1.3.3.jar --Download commons-fileupload-1.3.3-bin.zip von http://commons.apache.org/proper/commons-fileupload/download_fileupload.cgi, entpacken und webContent commons-fileuploard-1.3.3.jar Platzieren Sie in / WEB-INF / lib
- Verwenden Sie die neueste Version 1.3.3, da in der Vergangenheit Sicherheitslücken gemeldet wurden
- commons-io-2.6.jar
- Laden Sie commons-io-2.6-bin.zip von http://commons.apache.org/proper/commons-io/download_io.cgi herunter, entpacken und entpacken Sie commons-io-2.6.jar in WebContent / WEB-INF Setzen Sie in / lib
4. Implementierung
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
//Formularobjekt erstellen
var form = document.getElementById("form");
//Was tun, wenn das Übermittlungsereignis auftritt?
form.addEventListener("submit", function(event) {
//Entfernen Sie die Standardfunktion des Formulars und verwalten Sie es mit JavaScript
event.preventDefault();
check();
});
function check() {
//Holen Sie sich den Wert des Formulars
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var image = document.getElementById("image").value;
//Senden, wenn eingegeben
if (username != "" && password != "" && image != "") {
sendData();
} else {
alert("Please input all item.");
}
}
function sendData() {
//Erstellen eines FormData-Objekts
var formData = new FormData(form);
//Senden Sie eine HTTP-Anfrage mit XMLHttpRequest
var req = new XMLHttpRequest();
//Verarbeitung nach Abschluss des Sendens / Empfangens
req.addEventListener("load", function(event) {
if (req.responseText == "done") {
//Verarbeitung bei erfolgreicher Verarbeitung
alert("Succeeded.");
} else {
alert("Failed to send.");
}
});
//Verarbeitung bei fehlgeschlagenem Senden / Empfangen
req.addEventListener("error", function(event) {
alert("Error");
});
//Einstellungen für HTTP-Anforderungen
req.open("POST", "/sample/SampleServlet"); // /Anwendungsname/Servlet-Name
//Anfrage senden
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");
//Antworttext
String responseText = "done";
//Erstellen Sie ServletFileUpload aus DiskFileItemFactory
DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload sfu = new ServletFileUpload(factory);
try {
//Speichern Sie die Daten des Anforderungsformulars in einer Liste
List list = sfu.parseRequest(request);
for (Object o : list) {
//Behandeln Sie alle Formulardaten als FileItem
FileItem item = (FileItem) o;
//Verzweigen Sie abhängig davon, ob FileItem ein Feld oder eine Datei ist
if (item.isFormField()) {
//Rufen Sie für Felder den Feldnamen und den Wert ab
// (In der Form<input name="Feldname" value="Eingaben eingegeben")
String fieldName = item.getFieldName();
String value = item.getString();
if (fieldName.equals("username")) {
//Verarbeitung von Benutzernamen
System.out.println("username : " + value);
} else if (fieldName.equals("password")){
//Passwortverarbeitung
System.out.println("password : " + value);
}
} else {
File file = new File(item.getName());
try {
String dirPath = "Ziel zum Speichern der Bilddatei";
String filePath = dirPath + File.separator + file.getName();
//Bilddatei speichern
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";
}
//Antwort senden
response.getWriter().print(responseText);
}
}
6. Ergebnis
Wenn nicht eingegeben
Wenn alle Elemente eingegeben wurden
5. Referenz
JavaScript
- XMLHttpRequest : https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest --FormData-Objekt: 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