java web 上传文件夹的实现（支持Chrome）

上传文件夹的思路其实就是将文件夹中所有的文件上传到服务器，上传的时候文件名称要从文件夹目录开始截取，以下图中的目录为例，index.html文件应该以news_1/index.html的路径传到服务器，所有文件上传之后，上传到服务器的文件夹路径是从上传的上传的文件路径截取到文件夹结束。下面详细介绍：

Chrome的实现可以通过input标签的webkitdirectory就可以很容易的实现，但是由于ie浏览器不支持input标签的webkitdirectory属性，所以IE浏览器下可以直接通过ActiveX来直接访问和操作本地文件。实现可查看java web 上传文件夹的实现（支持IE）文章，下面介绍Chrome的实现方法：

假设我需要上传的文件夹目录如下，下面的例子会已这个文件夹路径为参考：

1.Chrome实现上传文件夹：

（1）type=‘file’的input标签是传统上传文件的实现方式，在这里只需要加上webkitdirectory属性，就可以选择文件夹了：

<form method="POST" enctype=multipart/form-data>
<input type="text" name="JUMP_LINK" id="JUMP_LINK" readonly="readonly" value="" title="文件夹" />
<input type='file' name="folder" id="folder" onchange="uploadFolder();" webkitdirectory>
</form>

需要注意2点，1.form表单要用POST提交；2.至于enctype=multipart/form-data属性，本人加了之后发现对同一个表单的上传文件会有影响，去了之后发现并不影响，所以可以默认不要，有问题的时候再加;

（2）js部分如下，通过FormData类保存文件夹中的所有文件

<script>
//上传文件夹
function uploadFolder(){
var formData = new FormData();
if($("#folder")[0].files.length>0){
for(var i=0;i<$("#folder")[0].files.length;i++){
formData.append('file_'+i, $("#folder")[0].files[i]);//此处的第一个参数不能重复，否则会覆盖
}
}
$.ajax({
url: '<%=basePath%>graphicInformation/uploadFolder.do',
type: 'POST',
cache: false,
data: formData,
dataType:"json",
processData: false,
contentType: false,
success:function(data){
if(data.state == "success"){
$("#JUMP_LINK").val(data.folder_url);//将上传之后的路径存到id为JUMP_LINK的标签里
alert("文件夹上传成功");
}else{
alert.msg(data.state);
}
}
});
}
</script>

（3）java后台实现的思想是，在循环上传文件的时候，在第一次截取文件夹的名称，也就下文中的folderRoot变量，执行时folderRoot的值应该“news_1/”,fileName的值为"news_1/index.html"，其他类似，然后将fileName作为文件名上传到服务器。fileRelativePath 变量是自己加的上传服务器的前缀路径，大家可以根据自己的情况决定。实现如下：

/**
* 上传文件夹
*
* @return
* @throws IOException
*/
@RequestMapping(value = "/graphicInformation/uploadFolder")
@ResponseBody
public Map<String,String> uploadFolder(HttpServletRequest request)
throws Exception {
Map<String,String> map = new HashMap<String, String>();
// 文件上传开始
// 创建一个通用的多部分解析器
CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
request.getSession().getServletContext());
String folderRoot = "";
String fileRelativePath = Const.DDJD_NEWS_FOLDER+new SimpleDateFormat("yyyyMM").format(new Date())+ "/" ;
// 判断 request 是否有文件上传,即多部分请求
if (multipartResolver.isMultipart(request)) {
MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
// 取得request中的所有文件名
Iterator<String> iter = multiRequest.getFileNames();
while (iter.hasNext()) {
// 取得上传文件
MultipartFile file = multiRequest.getFile(iter.next());
CommonsMultipartFile cf= (CommonsMultipartFile)file;
DiskFileItem fi = (DiskFileItem)cf.getFileItem();
// 取得当前上传文件的相对路径
String fileName = fi.getName();
if("".equals(folderRoot) && fileName.indexOf("/") !=-1){
folderRoot = fileName.substring(0, fileName.indexOf("/"))+"/";
}
if (file != null) {
String myFileName = file.getOriginalFilename();
// 如果名称不为“”,说明该文件存在，否则说明该文件不存在
if (myFileName.trim() != "") {
// 上传文件
Map<String,String> uploadResult = OSSClientUtil.uploadFile2OSS(file.getInputStream(), fileName,Const.DDJD_NEWS_CODE,2);
if (Tools.isEmpty(uploadResult.get("ret"))) {
map.put("state", "上传失败");
return map;
}
// 把路径返回出去
System.out.println(ALI_OSS_PRIFIX + fileRelativePath+ fileName);
// 把相对路径返回出去
}
}
}
}
map.put("folder_url",ALI_OSS_PRIFIX + fileRelativePath+folderRoot+"index.html");
map.put("state", "success");
// 文件上传结束
return map;
}

参考文章：http://blog.ncmem.com/wordpress/2023/11/05/java-web-%e4%b8%8a%e4%bc%a0%e6%96%87%e4%bb%b6%e5%a4%b9%e7%9a%84%e5%ae%9e%e7%8e%b0%ef%bc%88%e6%94%af%e6%8c%81chrome%ef%bc%89/

欢迎入群一起讨论