sirve - Carga de archivos HTML5 a Java Servlet
servlets y jsp (1)
Sé cómo hacer funcionar el HTML5 DnD, pero no puedo entender la mecánica de una conexión y / o back-end Java Servlet.
No es diferente de cuando se usa un <form enctype="multipart/form-data"> regular. Todo lo que necesita hacer es obtener ese código HTML5 / JS para enviar una solicitud multipart/form-data con el archivo caído, exactamente el mismo tipo de solicitud que se hubiera enviado con un <input type="file"> regular <input type="file"> campo. Asumiré que simplemente no se puede averiguar cómo lograr exactamente eso con HTML5 / JS.
Puede utilizar la nueva API de File HTML5 , las API XHR2 FormData y XMLHttpRequestUpload para esto.
Aquí hay un ejemplo inicial de cómo debe verse su manejador de eventos drop :
function dropUpload(event) {
event.stopPropagation();
event.preventDefault();
var formData = new FormData();
formData.append("file", event.dataTransfer.files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST", "uploadServlet");
xhr.send(formData);
}
Eso es. Este ejemplo asume que el servlet está mapeado en un patrón de URL de /uploadServlet . En este ejemplo, el archivo está entonces disponible en Apache Commons FileUpload de la manera habitual como una instancia de FileItem con un nombre de campo de file .
Para obtener información más avanzada, como la vinculación de controladores de eventos para supervisar el progreso, haga clic en los siguientes blogs:
- Subida de arrastrar y soltar HTML5 y tutorial de API de archivo
- Carga de archivos HTML5 con progreso
He jugado un poco con el siguiente SSCCE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 drag''n''drop file upload with Servlet</title>
<script>
window.onload = function() {
var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", noop, false);
dropbox.addEventListener("dragexit", noop, false);
dropbox.addEventListener("dragover", noop, false);
dropbox.addEventListener("drop", dropUpload, false);
}
function noop(event) {
event.stopPropagation();
event.preventDefault();
}
function dropUpload(event) {
noop(event);
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
upload(files[i]);
}
}
function upload(file) {
document.getElementById("status").innerHTML = "Uploading " + file.name;
var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.open("POST", "uploadServlet", true); // If async=false, then you''ll miss progress bar support.
xhr.send(formData);
}
function uploadProgress(event) {
// Note: doesn''t work with async=false.
var progress = Math.round(event.loaded / event.total * 100);
document.getElementById("status").innerHTML = "Progress " + progress + "%";
}
function uploadComplete(event) {
document.getElementById("status").innerHTML = event.target.responseText;
}
</script>
<style>
#dropbox {
width: 300px;
height: 200px;
border: 1px solid gray;
border-radius: 5px;
padding: 5px;
color: gray;
}
</style>
</head>
<body>
<div id="dropbox">Drag and drop a file here...</div>
<div id="status"></div>
</body>
</html>
y este UploadServlet utiliza la nueva API Servlet 3.0 HttpServletRequest#getPart() :
@MultipartConfig
@WebServlet("/uploadServlet")
public class UploadServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
Part file = request.getPart("file");
String filename = getFilename(file);
InputStream filecontent = file.getInputStream();
// ... Do your file saving job here.
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
response.getWriter().write("File " + filename + " successfully uploaded");
}
private static String getFilename(Part part) {
for (String cd : part.getHeader("content-disposition").split(";")) {
if (cd.trim().startsWith("filename")) {
String filename = cd.substring(cd.indexOf(''='') + 1).trim().replace("/"", "");
return filename.substring(filename.lastIndexOf(''/'') + 1).substring(filename.lastIndexOf(''//') + 1); // MSIE fix.
}
}
return null;
}
}
Ver también:
Mi pregunta lo dice todo. Actualmente estoy usando Uploadify (Flash + Ajax) para el Servlet (carga de Commons con superposición ESAPI de OWASP) con éxito, pero me preguntaba cómo haría para construir HTML5 compatible o, mejor dicho, HTML5 con soporte flash.
Sé cómo hacer funcionar el HTML5 DnD, pero no puedo entender la mecánica de una conexión y / o back-end Java Servlet. He buscado en muchos lugares, pero no puedo encontrar ninguna respuesta, por lo que cualquier ayuda es apreciada.