js多文件上传删除

1)html:

<tr>
<td class="tr-left">上传附件：</td>
<td class="tr-right"  colspan="3">
<input type="button" id="filebtn" name="filebtn" style="width:80px" value="请选择文件" >
<div id="divflag" style="display:inline;height:21px;width:80px;">
<c:if test="${gerne == 'updateLoaninfo'}">
<c:forEach var="item" items="${nameArr}">
<div style="display:inline;height:21px;width:80px;">
<input type="file" name="attinfo" style="display:none;"/><!--空文件 -->
<span>${item}</span><a οnclick="deletex(this)" data-name="${item}"><i style="display:inline-block;width:16px;height:16px;background:#f00;border-radius:8px;text-align:center;line-height:15px;color:#fff;font-style:normal;margin-right:10px;">×</i></a>
</div>
</c:forEach>
</c:if>
</div>
</td>
</tr>

2)JS

//文件上传事件
$('#filebtn').click(function(){
crateForm2($(this),'attinfo');
});

function crateForm2(that,name){
var uploadFile = $('<div style="display:inline;height:21px;width:80px;"><input name="'+name+'" id="uploaderInput" style="display:none;" type="file" multiple/></div>');
$("#divflag").append(uploadFile);  
   $("#uploaderInput").bind("change",function(e){  
       //上传文件时，处理相关逻辑 
       $(this).removeAttr("id");  
    var fileList = this.files;
    var len = fileList.length;
if(len> 0){
for(var i=0;i<len;i++){
var value= fileList[i].name;
if(nameArr.indexOf(value) != -1){//有相同文件名
$.messager.alert('提示信息', value+'文件已存在，请重新选择', 'warning');
uploadFile.remove();//把新选择的文件删除
   return false;
}else{
nameArr.push(value);
var txt = $('<span>'+value+'</span><a οnclick="deletex(this)" data-name="'+value+'"><i style="display:inline-block;width:16px;height:16px;background:#f00;border-radius:8px;text-align:center;line-height:15px;color:#fff;font-style:normal;margin-right:10px;">×</i></a>');
uploadFile.append(txt);
}
}
}
    });  
    $("#uploaderInput").click();   

}

  function deletex(that){
debugger;
var $dom = $(that).closest('div');
var len = $dom.find('span').length;
var val = $(that).attr('data-name');
if(len >1){//如果一次选择多次文件
var $a = $(that);
   var $span = $a.prev();
   $a.remove();
   $span.remove();
}else{//如果一次选择一个文件
$dom.remove();
}
//删除文件名称
nameArr.remove(val);
}

3)后台代码

CONTROLLER:

String nameArr[]=null;
//获取所有上传文件名称
String namestr = request.getParameter("namestr");
if(namestr != null && !"".equals(namestr)){
nameArr = namestr.split(",");
}
ArrayList<MultipartFile> arrayList = new ArrayList<MultipartFile>();

if(namestr != null && !"".equals(namestr)){
for(int i=0,len=files.length;i<len;i++){
if(files[i].getSize()>0){
// 获得原始文件名  
       String fileName = files[i].getOriginalFilename();  
     //过滤选择后又删除的文件
if(nameArr.length>0){
Boolean flag = Arrays.asList(nameArr).contains(fileName);
if(flag){//名称数组中不包含这个文件，就不上传
arrayList.add(files[i]);
}
}
}else{
arrayList.add(files[i]);//空
}

}
}

SERVICE:

String id = (String) map.get("v_code");
//保存上传附件
int len = files.size();
//获取图片保存位置
String uppath = PropertyUtil.getProperty("imagePath");
for(int i=0;i<len;i++){
if(files.get(i).getSize()>0){
// 获得原始文件名  
       String fileName = files.get(i).getOriginalFilename();  
       // 新文件名  
String newFileName = id + "--" + fileName;
       //把文件保存到磁盘
          try {  
          //转存文件
          files.get(i).transferTo(new File(uppath + "/"+newFileName));
          }catch (Exception e) {  
              e.printStackTrace();
          } 
          //文件上传位置
          path += uppath + "/"+newFileName+",";
}else{
//重新申请时未上传文件用之前上传的文件
String newFileName =  oldcode + "--" + nameArr[i];
path += uppath + "/"+newFileName+",";
}
}
if(!"".equals(path)){
path = path.substring(0, path.length()-1);
}