新手做了一个个人网盘,文件的上传列表一直找不到合适的解决方案
用传统form表单提交,只能一次性的,虽然能实现对上传文件信息的预览,但是每次添加都会清空列表,而且无法修改上传列表.查了各种资料,都说input file里的信息是只读的,不能修改,最后决定用FormData来实现,可以直接对上传列表进行列表,修改.
把过程写出来,希望能给大家思路.直接上代码
html
<th >
<input type="file" id="getFile" multiple style="display: none" hidden>
<input class="btn btn-primary" type="button" value="添加文件" onclick="getFile()">
<input class="btn btn-success" type="button" onclick="upload(fd)" value="确认上传">
</th>
<tbody id="fileInfo">
<%-- 这里动态添加文件信息--%>
</tbody>
js
<script>
function getFile(){
document.getElementById("getFile").click();
}
var fd = new FormData();
//获取文件框ID
var input = document.getElementById('getFile');
//获取tbody ID
var fileInfo = document.getElementById('fileInfo');
//创建监听器,当文件框确认时执行函数
input.addEventListener('change', updateDisplay);
//发送FormData
function upload(fd) {
var xhr = new XMLHttpRequest();
xhr.open("post", "${pageContext.request.contextPath}/file/upload", true);
xhr.send(fd);
}
var f=1;
function updateDisplay() {
//从input file中获取文件
var curFiles = input.files;
for(var i = 0; i < curFiles.length; i++,f++) {
//创建tr
var tr = document.createElement('tr');
//设置tr的id和file文件的id,用于删除
var trId="tr"+f;
var fileId="file"+f;
tr.setAttribute("id",trId);
//添加到FormData中
fd.append(fileId, curFiles[i]);
//设置图片预览td
var imageTd=document.createElement("td");
//设置图片框img,包含在图片td里
var image = document.createElement('img');
//设置文件名td
var name = document.createElement('td');
//设置文件大小td
var size = document.createElement('td');
//设置上传进度td,暂未实现
// var progress=document.createElement("td");
//设置按钮td
var button=document.createElement("td");
//设置input按钮
var del=document.createElement("input");
//设置按钮属性
del.setAttribute("class","btn btn-primary");
del.setAttribute("type","button");
del.setAttribute("onclick","deleteFd('"+fileId+"','"+trId+"')");
del.setAttribute("value","删除");
//填充图片框
image.src = window.URL.createObjectURL(curFiles[i]);
//将图片框加入到td中
imageTd.appendChild(image);
//填充文件名td
name.textContent = curFiles[i].name ;
//填充文件大小td
size.textContent = returnFileSize(curFiles[i].size);
//将按钮加入到按钮框td中
button.appendChild(del)
//将所有td加入到tr中
tr.appendChild(imageTd);
tr.appendChild(name);
tr.appendChild(size);
// tr.appendChild(progress);
tr.appendChild(button);
//将tr加入到tbody中
fileInfo.appendChild(tr);
}
}
// 格式化文件大小
function returnFileSize(number) {
if(number < 1024) {
return number + 'bytes';
} else if(number > 1024 && number <1048576) {
return (number/1024).toFixed(2) + 'KB';
} else if(number > 1048576&&number<1073741824) {
return (number/1048576).toFixed(2) + 'MB';
}else if(number > 1073741824) {
return (number/1073741824).toFixed(2) + 'GB';
}
}
// 操作删除上传列表
function deleteFd(fileId,trId) {
fd.delete(fileId);
document.getElementById(trId).remove();
}
</script>
java后台
public String upLoad(HttpServletRequest request) throws IOException {
MultipartHttpServletRequest ms= (MultipartHttpServletRequest) request;
Map<String, MultipartFile> fileMap = ms.getFileMap();
Collection<MultipartFile> values = fileMap.values();
//遍历获取文件信息
for (MultipartFile value : values) {
System.out.println(value.getOriginalFilename());
System.out.println(value.getSize());
...........
//各种获取真实地址判断什么的代码都不写了
...........
//最后实现上传
value.transferTo(new File(path,filename));
}
return ....;
原理:每次添加文件,就把文件信息添加进FormData中记录序号,动态添加表格,并记录表格id
有了文件序号和表格id,就可以各种操作了,主要就是下面这块代码进行操作
// 操作删除上传列表
function deleteFd(fileId,trId) {
fd.delete(fileId);
document.getElementById(trId).remove();
}