HTML5file upload到Java Servlet
我的问题就是这么说的。 我目前使用Uploadify（Flash + Ajax）到Servlet（通用上传w / OWASP ESAPI覆盖）成功，但我想知道如何去build设HTML5的支持，或者更确切地说HTML5的支持Flash。
我知道如何获得HTML5 DnD的工作，但我不能完全弄清楚Java Servlet连接和/或后端的机制。 我搜查了很多地方，但我找不到任何答案，所以任何帮助都是值得赞赏的。
我知道如何让HTML5的DnD工作，但我不能完全弄清楚Java Servlet连接和/或后端的机制。
和使用常规的<form enctype="multipart/form-data">没有区别。 所有你需要做的就是让这个HTML5 / JS代码发送一个带有被删除文件的multipart/form-data请求，与通常使用普通的<input type="file">发送的请求types完全一样领域。 我假设你无法弄清楚如何用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实例，并且具有file的字段名称。
对于更高级的东西，如附加事件处理程序来监视进度和喜欢，检出以下博客：
- HTML5拖放上传和文件API教程
- HTML5file upload与进展
我在下面的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>
而这个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; } }
也可以看看：
- 如何使用JSP / Servlet将file upload到服务器？
