Upload pliku HTML5 Do Java Servlet
Moje pytanie mówi wszystko. Obecnie używam Uploadify (Flash + Ajax) do Servletu (Commons Upload z nakładką OWASP ESAPI) z powodzeniem, ale zastanawiałem się, jak bym poszedł o budowanie w obsłudze HTML5, a raczej HTML5 z obsługą Flasha.
Wiem, jak uruchomić HTML5 DnD, ale nie mogę do końca zrozumieć mechaniki połączenia serwletów Java i / lub backend. Przeszukałem wiele miejsc, ale nie mogę znaleźć odpowiedzi, więc każda pomoc jest doceniam to.
1 answers
wiem, jak uruchomić HTML5 DnD, ale nie mogę do końca rozgryźć mechaniki połączenia serwletów Java i / lub backendu.
Nie różni się od zwykłego <form enctype="multipart/form-data">
. Wszystko, co musisz zrobić, to uzyskać kod HTML5 / JS, aby wysłać zapytanie multipart/form-data
z upuszczonym plikiem, dokładnie tego samego rodzaju żądanie, które byłoby wysłane ze zwykłym polem <input type="file">
. Zakładam, że po prostu nie można wymyślić, jak osiągnąć dokładnie to z HTML5 / JS.
Możesz wykorzystać nowy HTML5 File
API, XHR2 FormData
oraz XMLHttpRequestUpload
API do tego.
Oto przykład jak powinien wyglądać twój drop
event handler:
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);
}
To jest to. Ten przykład zakłada, że servlet jest mapowany na wzorze URL /uploadServlet
. W tym przykładzie plik jest następnie dostępny w Apache Commons FileUpload w zwykły sposób jako instancja FileItem
o nazwie pola file
.
Aby uzyskać bardziej zaawansowane rzeczy, takie jak dołączanie programów obsługi zdarzeń do monitorowania postępów i podobne, sprawdź następujące blogi:
Grałem trochę wokół niego z następującym 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>
I to UploadServlet
wykorzystując nowy Servlet 3.0 HttpServletRequest#getPart()
API:
@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;
}
}
Zobacz także:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:54:04