背景介绍：公司要在CMS系统上为运营人员提供一个功能供运营人员将做好的活动页面上传到阿里云存储上，上传的内容为一个文件夹，文件夹内部有.html网页，JS文件夹下有JS文件，CSS文件夹下有样式表，Images文件夹下有多张图片，具体的目录接口如下；
要在网页上将整个文件夹进行上传，下面介绍下我整个实现的过程。
项目架构，前端使用的JSP，后端使用的Jersey，一个类似WebService的技术。
直接上代码，前端JSP文件：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/Web/common/page/jqueryMaster_new.jsp"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>文件夹上传</title> </head> <body> <div id="content"> <h1>使用本功能时请使用谷歌浏览器</h1> <div style="clear:both;content:'';"></div> <br> <br> <u><font size="24">按照文件夹进行上传的功能只被个别浏览器支持，如谷歌，Microsoft Edge浏览器</font></u> <div style="clear:both;content:'';"></div> <br> <br> <form action="<%=url%>/v1/operation/uploadFolder" method="post" name="fileUploadForm" id="fileUploadForm" enctype="multipart/form-data"> <input name="fileFolder" type="file" webkitdirectory> <input type="submit" name="subButton" value="提交"> </form> </div> </body> </html>
需要特别说明的是：并不是全部的浏览器都支持按照文件夹进行上传，目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。
而在谷歌浏览器下，也不是没有条件的支持，必须在input上加入一个属性：webkitdirectory后才会予以支持。
后端代码也比较简单，但是必须注意的是，如果按照文件夹进行上传，后端就不能获取流，而是要获取整个表单。后端使用的是Jersey，想来使用其他技术应该也是一样的，只要能获取整个表单即可。
package com.bomei.services; import java.io.InputStream; import java.util.List; import javax.servlet.http.HttpServletRequest; import javax.ws.rs.Consumes; import javax.ws.rs.POST; import javax.ws.rs.Path; import javax.ws.rs.Produces; import javax.ws.rs.core.Context; import javax.ws.rs.core.MediaType; import org.apache.log4j.Logger; import org.springframework.stereotype.Service; import com.bomei.util.Toolkit; import com.bomei.util.UploadUtils; import com.sun.jersey.core.header.FormDataContentDisposition; import com.sun.jersey.multipart.FormDataBodyPart; import com.sun.jersey.multipart.FormDataMultiPart; /** * 运营功能服务类 * */ @Path("/v1/operation") @Service public class OperationService { private Logger logger = Logger.getLogger(getClass()); @POST @Path("/uploadFolder") @Consumes(MediaType.MULTIPART_FORM_DATA) @Produces(MediaType.TEXT_HTML) public String uploadFileFolder( @Context HttpServletRequest request, FormDataMultiPart fileUploadForm) { StringBuffer buffer = new StringBuffer().append(" "); //初始化本次上传的文件夹名 String curUploadFolderName = "operation/"+String.valueOf(Toolkit.getCurrentTime()); System.out.println("本次上传创建的文件夹路径为："+curUploadFolderName); List<FormDataBodyPart> filePartList = fileUploadForm.getFields("fileFolder"); if(null != filePartList){ for (FormDataBodyPart part : filePartList) { InputStream inputStream = part.getValueAs(InputStream.class); FormDataContentDisposition detail = part.getFormDataContentDisposition(); MediaType type = part.getMediaType(); String contentType = type.getType() + "/" + type.getSubtype(); String fileName = detail.getFileName(); //截取第一个/之后的路径地址 int indexOf = fileName.indexOf("/"); if(indexOf > 0){ fileName = curUploadFolderName + fileName.substring(indexOf); }else{ fileName = curUploadFolderName + fileName; } //开始上传操作 String path = UploadUtils.uploadFile(fileName, inputStream, contentType);//内部上传逻辑，你可以上传到你想要上传的任何位置 buffer.append(" ") .append("文件名称 ").append(detail.getFileName().trim()).append(" ").append("文件路径 ").append(path).append(" "); } }else{ System.out.println("获取上传的文件夹内容失败，或者文件夹中不存在文件"); } logger.info("运维上传的内容为："+buffer.toString()); System.out.println("运维上传的内容为："+buffer.toString()); return buffer.toString(); } }
具体的上传方法没有贴出来，你可以自己实现，或者百度，我内部是上传到了阿里云上。
至此整个文件夹上传操作就完成了，有两点需要注意的再次提一下：
1：并不是所有的浏览器都支持按照文件夹进行上传，需要添加必要的属性；
2：后端代码要获取的不是流对象，而是整个表单对象，这样才能遍历上传的文件夹。