[HTML5][JSP]利用FormData对象完成表单的异步上传|文件上传|图文同时上传

前端很简单：（jquery写起来方便，事实上用原生的javascript也是完全可以的，略，可以参见>这里<）

        $("#uploadFileBtn").click(function () {            var pic = $("#uploadFileInput")[0].files[0];            var fd = new FormData();            fd.append('pw',$("#pw").val() );//这里挂载的普通文本，假设我这里传的是管理员密码            fd.append('uploadFile', pic);//这里挂载的是一个文件            $.ajax({                url: gv.root + "FileUploadServlet",                type: "post",                // Form数据                data: fd,                cache: false,                contentType: false,                processData: false,                success: function (data) {                    $.growl({                        title: "操作结果",                        message: data                    });                    $("#pw").val("");                    jump(1,location.href)                }            });        })

利用Html5，Html页面中甚至不需要出现Form标签：

<input type="text" class="form-control" placeholder="输入管理员密码" id="pw"/><!--中间甚至可以写其他的东西，比如跨div。超级灵活---><input type="file" class="form-control" id="uploadFileInput" /><a class="btn btn-success btn-large" href="javascript:void(0)" id="uploadFileBtn">上传文件</a>

后台servlet接受数据：

private static final String UPLOAD_DIRECTORY = "upload"// 上传配置private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;  // 3MBprivate static final int MAX_FILE_SIZE      = 1024 * 1024 * 40; // 40MBprivate static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 50; // 50MBprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {PrintWriter out = response.getWriter();// 检测是否为多媒体上传if (!ServletFileUpload.isMultipartContent(request)) {// 如果不是则停止out.println("Error: 表单必须包含 enctype=multipart/form-data");out.flush();return;}// 配置上传参数DiskFileItemFactory factory = new DiskFileItemFactory();// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中factory.setSizeThreshold(MEMORY_THRESHOLD);// 设置临时存储目录factory.setRepository(new File(System.getProperty("java.io.tmpdir")));ServletFileUpload upload = new ServletFileUpload(factory);// 设置最大文件上传值upload.setFileSizeMax(MAX_FILE_SIZE);// 设置最大请求值 (包含文件和表单数据)upload.setSizeMax(MAX_REQUEST_SIZE);// 中文处理upload.setHeaderEncoding("UTF-8");// 构造临时路径来存储上传的文件// 这个路径相对当前应用的目录String uploadPath = getServletContext().getRealPath("./")+File.separator+UPLOAD_DIRECTORY;// 如果目录不存在则创建File uploadDir = new File(uploadPath);if (!uploadDir.exists()) {uploadDir.mkdir();}try {// 解析请求的内容提取文件数据@SuppressWarnings("unchecked")List<FileItem> formItems = upload.parseRequest(request);String pw  = formItems.get(0).getString();//直接获取了第一个挂载的普通文本if(!pw.equals("AdminPw")){out.println("您不具备管理员权限！");return;}if (formItems != null && formItems.size() > 0) {// 迭代表单数据for (FileItem item : formItems) {// 处理不在表单中的字段if (!item.isFormField()) {String fileName = new File(item.getName()).getName();String filePath = uploadPath + File.separator + fileName;File storeFile = new File(filePath);// 在控制台输出文件的上传路径//System.out.println(filePath);// 保存文件到硬盘item.write(storeFile);//直接写出文件}/* else {//表单里的其他text}*/}out.println("上传成功");}} catch (Exception e) {e.printStackTrace();out.println("服务器错误！失败!");}}

需要导两个包到web/lib/下：

commons-fileupload-1.3.2.jar

commons-io-2.5.jar