由于工作中业务需要在界面提供用户上传文件夹的功能,平时上传文件做的还多一些,包括对上传文件也有许多插件提供了良好的支持,比如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" onclick="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";
}
}
}