由于工作中业务需要在界面提供用户上传文件夹的功能,平时上传文件做的还多一些,包括对上传文件也有许多插件提供了良好的支持,比如fileinput.js,还有webupload.js。。。,但对上传文件夹的支持就没有,h5里提供了webkitdirectory 来实现上传文件夹的功能,但它仅支持Chrome。话不多说,上代码
HTML代码:
<form class="form-horizontal" role="form" id="fileUploadForm" action="/sys/uploadFolder" name="fileUploadForm" method="post" enctype="multipart/form-data">
<div class="form-group">
<input id="fileFolder" name="fileFolder" type="file" webkitdirectory><span id="msg" style="color:#F00"></span>
</div>
<button type="button" class="btn btn-primary" id="subButton" οnclick="commit()">Submit</button>
</form>
js代码:
//页面提示信息 var msg; //文件数量限制 var filesCount=2000; //文件夹大小限制 2000M var filesSize=2147483648; //实际的文件数量 var actual_filesCount=0; //实际的文件夹大小 var actual_filesSize=0; function commit(){ //判断是否选中文件夹 var file=$("#fileFolder").val(); if(file==''){ $("#msg").text('请选择要上传的文件夹'); return; } $("#fileUploadForm").submit(); } document.getElementById('fileFolder').onchange = function(e) { //判断是否选中文件 var file=$("#fileFolder").val(); if(file!=''){ $("#msg").text(''); } var files = e.target.files; // FileList //文件数量 actual_filesCount = files.length; if(actual_filesCount > filesCount){ $("#msg").text("文件过多,单次最多可上传"+filesCount+"个文件"); return; } for (var i = 0, f; f = files[i]; ++i){ actual_filesSize += f.size; if(actual_filesSize > filesSize){ $("#msg").text("单次文件夹上传不能超过"+filesSize/1024/1024+"M"); return; } } };
java代码:
import java.util.List; import javax.servlet.http.HttpServletRequest; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import org.springframework.web.multipart.MultipartHttpServletRequest; /* * 文件管理 * 上传文件夹 * * */ @RestController public class SysFilesUploadController { @Autowired private SysFilesUploadService sysFilesUploadService; @RequestMapping(value="/sys/uploadFolder",method=RequestMethod.POST) @ResponseBody public String uploadFileFolder(HttpServletRequest request) { MultipartHttpServletRequest params=((MultipartHttpServletRequest) request); List<MultipartFile> files = params.getFiles("fileFolder"); String result = sysFilesUploadService.upload(files); return result ; } }
import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.util.List; import org.springframework.beans.factory.annotation.Value; import org.springframework.stereotype.Service; import org.springframework.web.multipart.MultipartFile; @Service("sysFilesUploadService") public class SysFilesUploadServiceImpl implements SysFilesUploadService { private String Storage_PATH = "E\:\\upload\"; public String upload(List<MultipartFile> files) { BufferedOutputStream bos =null; BufferedInputStream bis=null; try { //遍历文件夹 for (MultipartFile mf : files) { if(!mf.isEmpty()) { String originalFilename = mf.getOriginalFilename(); //格式限制,非wav格式的不上传 if(!"wav".equals(originalFilename.substring(originalFilename.lastIndexOf(".")+1))) { continue; } String fileName=originalFilename.substring(originalFilename.lastIndexOf("/")+1); //为避免文件同名覆盖,给文件名加上时间戳 int index = fileName.lastIndexOf("."); String firstName=fileName.substring(0, index); String lastName=fileName.substring(index); fileName=firstName+"_"+System.currentTimeMillis()+lastName; //读取文件 bis=new BufferedInputStream (mf.getInputStream()); //指定存储的路径 bos=new BufferedOutputStream(new FileOutputStream (Storage_PATH+fileName)); int len=0; byte[] buffer=new byte[10240]; while((len=bis.read(buffer))!=-1){ bos.write(buffer, 0, len); } //刷新此缓冲的输出流,保证数据全部都能写出 bos.flush(); } } bis.close(); bos.close(); return "ok"; } catch (FileNotFoundException e) { e.printStackTrace(); return "error"; } catch (IOException e) { e.printStackTrace(); return "error"; } } }