HTML5文件上传到Java Servlet [英] HTML5 File Upload to Java Servlet
问题描述
我知道如何获得HTML5 DnD的工作，但我无法弄清楚Java Servlet连接和/或后端的机制。我已经搜索了很多地方，但我找不到任何答案，所以任何帮助都是值得赞赏的。
我知道如何获得HTML5 DnD的工作，但我无法弄清楚Java Servlet连接和/或后端的机制。
与使用常规< form enctype =multipart / form-data> 。所有你需要做的就是让这个HTML5 / JS代码发送一个带有被删除文件的 multipart / form-data 请求，这个请求与它的请求类型完全一样已使用常规< input type =file> 字段发送。我假设你无法弄清楚如何用HTML5 / JS实现。
你可以使用新的 HTML5 File API， XHR2 FormData 和 XMLHttpRequestUpload 这是一个开始的例子，你的 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）;
}
就是这样。这个例子假定servlet被映射到 I在下面的SSCCE中，我们对它进行了一些调整： 和 My question kind of says it all. I am currently using Uploadify (Flash + Ajax) to the Servlet (Commons Upload w/ OWASP ESAPI overlay) with success, but I was wondering how I would go about building in HTML5 support, or rather HTML5 with flash support. I know how to get the HTML5 DnD working, but I can't quite figure out the mechanics of a Java Servlet connection and/or backend. I have searched lots of places, but I can't find any answers, so any help at all is appreciated. I know how to get the HTML5 DnD working, but I can't quite figure out the mechanics of a Java Servlet connection and/or backend. It's not different from when using a regular You can utilize the new HTML5 Here's a kickoff example of how your That's it. This example assumes that the servlet is mapped on a URL pattern of For more advanced stuff like attaching event handlers for monitoring the progress and like, checkout the following blogs: I've played somewhat around it with the following SSCCE: and this
这篇关于HTML5文件上传到Java Servlet的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ / uploadServlet 的URL模式。在这个例子中，这个文件可以在Apache Commons FileUpload中以通常的方式作为 FileItem 实例，并且其名称为 file / p>
$ b <！DOCTYPE html>
< html lang =en>
< head>
< title> HTML5使用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;
（var i = 0; i< files.length; i ++）{
upload（files [i]）;
函数上传（文件）{
document.getElementById（status）。innerHTML =上传+ 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）; //如果async = false，那么你会错过进度条的支持。
xhr.send（formData）;
}
函数uploadProgress（event）{
//注意：不适用于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纯灰色;
border-radius：5px;
padding：5px;
颜色：灰色;
}
< / style>
< / head>
< body>
< div id =dropbox>将文件拖放到这里...< / div>
< div id =status>< / div>
< / body>
< / html>
UploadServlet 利用新的Servlet 3.0 HttpServletRequest＃getPart（） API：
$ b
@MultipartConfig
@WebServlet（/ uploadServlet）
public class UploadServlet extends HttpServlet {
$ b @Override
protected void doPost（HttpServletRequest request，HttpServletResponse response）throws ServletException，IOException {
Part file = request.getPart（file）;
String filename = getFilename（file）;
InputStream filecontent = file.getInputStream（）;
// ...在这里做你的文件保存工作。
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（;））{ （cd.trim（）。startsWith（filename））{
String filename = cd.substring（cd.indexOf（'='）+ 1）.trim（）。replace（ \，）;
return filename.substring（filename.lastIndexOf（'/'）+ 1）.substring（filename.lastIndexOf（'\\'）+ 1）; // MSIE
return null
$ b $ $ $
另见：
如何上传文件到服务器使用JSP / Servlet？
<form enctype="multipart/form-data">. All you need to do is to get that HTML5/JS code to send a multipart/form-data request with the dropped file, exactly the same kind of request as it would have been sent with a regular <input type="file"> field. I'll assume that you just can't figure out how to achieve exactly that with HTML5/JS.File API, XHR2 FormData and XMLHttpRequestUpload APIs for this.drop event handler should look like: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);
}
/uploadServlet. In this example, the file is then available in Apache Commons FileUpload the usual way as a FileItem instance with a field name of file.
<!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>
UploadServlet utilizing the new 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;
}
}
See also:
