我知道如何使HTML5 DnD工作，但我不能弄清楚Java Servlet连接和/或后端的机制。我搜索了很多地方，但我找不到任何答案，所以任何帮助，赞赏。
解决方法
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.
与使用常规的< form enctype =“multipart / form-data”>没有什么不同。所有你需要做的是让HTML5 / JS代码发送一个多部分/表单数据请求，其中包含已删除的文件，与使用普通的< input type =“file”发送的完全相同的请求类型>领域。我会假设你不知道如何通过HTML5 / JS实现。 您可以使用新的HTML5 File API，XHR2 FormData和XMLHttpRequestUpload API。
这是一个启动例子，说明你的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在/ uploadServlet的URL模式上映射。在这个例子中，该文件可以通过Apache Commons FileUpload的方式作为具有文件名称的FileItem实例。
对于更高级的东西，例如附加事件处理程序来监视进度，等等，请检查以下博客：
> HTML5 Drag and Drop Upload and File API Tutorial
> HTML5 File Upload With Progress
我已经用以下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",false);
dropBox.addEventListener("dragover",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利用新的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;
}
}
也可以看看：
