多附件上传下载删除（表格形式展示）

最近在做附件上传，之前没有做过，在这里记录一下

效果 （ 项目隐私问题，没有截全屏）

图一：上传附件，删除
上传（再次选择会覆盖掉表格之前的数据）
删除（因为这一部分还没提交至数据库，所以只是删除表格信息）

图二：下载，删除
此处的上传按钮，选择完文件会覆盖掉表格现有数据（其实是选择完重新加载了一个表格），别担心原有数据丢失其实还存在数据库中，只要不点击删除！（这一部分以后要修缮的）

HTML 代码

<form class="form-horizontal m" id="form-blacklist-add">
         <div class="form-group">
			<label class="col-sm-3 control-label" style="padding-top:10px;">附件:</label>
			<div class="col-sm-8 push" data-provides="fileinput">
			<div class="col-sm-8 select-table table-striped" style="padding-top: 10px;text-align: center;">
				<table id="bootstrap-table" data-mobile-responsive="true"></table>
			</div>
			<button class="btn btn-success " onclick="clickfile('file')" type="button" >
				<span>上传附件</span>
			</button>
			<input id="file" type="file" class="fileinput" multiple="multiple" onchange="fileonchange()" style="display: none">
		</div>
	</div>
 </form>


function submitHandler() {
    if ($.validate.form()) {
     	if(document.getElementById("file").files.length<=0){	//没有附件就直接提交
     		$.operate.save(prefix + "/add", $('#form-blacklist-add').serialize());
         }else{
         	var formData =new FormData($('#form-blacklist-add')[0]);
         	var fileAdd2=document.getElementById("file").files;
     		for(var i=0;i<fileAdd2.length;i++){
     			formData.append("file",fileAdd2[i]);
            	}
     		save(prefix + "/add", formData);//prefix + "/add"  是 url
     	}
         
     }
 }

JS

$(document).ready(function(){  
	var FileList2 = {};
	var fileAdd={};
	retableEdit(FileList2);
});


//点击事件
function clickfile(id){
	$("#file").click();
}
//选择文件后事件
function fileonchange(){
	fileAdd=document.getElementById("file").files;
	for(var i=0;i<fileAdd.length;i++){
		fileAdd[i].cz='未上传'
	}
	retable(fileAdd);
}

function retable(fileAdd){
	var options = {
        data:fileAdd,
        pagination:false,
        striped:true,
        sortOrder:false,
        search:false,
        showSearch:false,
        showPageGo:false,
        showRefresh:false,
        showColumns:false,
        showToggle:false,
        modalName: "文件",
        showExport: false,
        columns: [{
            checkbox: false,
           	visible: false
        },
        {
            title: "序号",
            formatter: function (value, row, index) {
         	    return index+1;
            }
        },
		{
			field : 'name', 
			title : '附件名称',
			visible: true,
			formatter: function(value, row, index) {
				return $.table.tooltip(value);
			}
		},
		{
			field : 'size', 
			title : '附件大小',
			sortable: true,
			formatter: function(value, row, index) {
				if(value<=1000){
					  return value+"bytes";
				}
				if(value/1000<=1000){
					  return (value/1000).toFixed(2)+"KB";
				}
				if(value/1000/1000<=1000){
					  return (value/1000/1000).toFixed(2)+"MB";
				}
				return (value/1000/1000/1000).toFixed(2)+"GB";
			}
		},
		{
			field : 'type', 
			title : '附件类型',
			sortable: true,
			formatter: function(value, row, index) {
				return $.table.tooltip(value);
			}
		},
		{
			field : 'cz', 
			title : '操作',
			sortable: true,
			formatter: function(value, row, index) {
            	var actions = [];
            	actions.push('<a href="javascript:void(0)" onclick="del(this)" >删除</a>');
				return actions.join('');
            }
		}]	
    };
	$.table.destroy("bootstrap-table");
    $.table.initData(options);
}


function del(node) {
	$(node).parent().parent().remove();//删除表格数据
}

function delIds(id,node) {//删除就调用自己的后台方法，此处就不贴了
	//删除数据库数据
	$.modal.confirm("确认删除此附件吗？", function() {
//		$.operate.post(ctx+"check/enclosure/removeById/"+id);
		 $.ajax({
    	        url: ctx + "check/enclosure/removeById/"+id,
    	        type:"post",
    	        dataType:"JSON",
    	        beforeSend: function () {
    	        	$.modal.loading("正在处理中，请稍后...");
    	        },
    	        success: function(result) {
    	        	if(result.code=="0"){
    	        		$(node).parent().parent().remove();//删除表格数据
    	        	}else{
    	        		$.modal.msgError(result.msg);
    	        	}
    	        	$.modal.closeLoading();
    	        }
    	    });
		
    })
}

function retableEdit(FileList2){
	var options = {
        data:FileList2,
        pagination:false,
        striped:true,
        sortOrder:false,
        search:false,
        showSearch:false,
        showPageGo:false,
        showRefresh:false,
        showColumns:false,
        showToggle:false,
        modalName: "文件",
        showExport: false,
        columns: [{
            checkbox: false,
           	visible: false
        },
        {
            title: "序号",
            align : 'center',
            formatter: function (value, row, index) {
         	    return index+1;
            }
        },
        {
        	field: 'enclosureId',
            title : '附件ID',
            visible: false
        },
		{
			field : 'enclosureName', 
			title : '附件名称',
			align : 'center',
			visible: true,
			formatter: function(value, row, index) {
				return $.table.tooltip(value);
			}
		},
		{
			field : 'enclosureSize', 
			title : '附件大小',
			align : 'center',
			sortable: true,
			formatter: function(value, row, index) {
				if(value<=1000){
					  return value+"bytes";
				}
				if(value/1000<=1000){
					  return (value/1000).toFixed(2)+"KB";
				}
				if(value/1000/1000<=1000){
					  return (value/1000/1000).toFixed(2)+"MB";
				}
				return (value/1000/1000/1000).toFixed(2)+"GB";
			}
		},
		{
			field : 'enclosureType', 
			title : '附件类型',
			sortable: true,
			align : 'center',
			formatter: function(value, row, index) {
				return $.table.tooltip(value);
			}
		},
		{
			field : 'enclosurePath', 
			title : '附件地址',
			visible: false
		},
		{
			title : '操作',
			align : 'center',
			sortable: true,
			formatter: function(value, row, index) {
            	var actions = [];
            	var pathName = window.document.location.pathname;
	        	var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
            	actions.push('<a href="'+projectName+'/profile/' + row.enclosurePath + '"  download="' + row.enclosureName + '" >下载</a>    ');
            	actions.push('<a href="javascript:void(0)" onclick="delIds(\'' + row.enclosureId + '\',this)" >删除</a>');
				return actions.join('');
            }
		}]	
    };
	$.table.destroy("bootstrap-table");
    $.table.initData(options);
}


//保存信息 刷新表格
function save(url, data, callback) {
	$.ajax({
		type:"post",
		url: url,
		async:true,
		cache: false,
  		processData: false,
  		contentType: false,
		dataType:"JSON",
		data: data,
		beforeSend: function () {
        	$.modal.loading("正在处理中，请稍后...");
        	$.modal.disable();
        },
		success:function (result) {
			if (typeof callback == "function") {
        	    callback(result);
        	}
        	$.operate.successCallback(result);
		}
	});
}

Controller

 /**
   * 新增附件
   * MultipartFile 单附件
   * MultipartFile[]  多附件
   */
  @PostMapping("/add")
  @ResponseBody
  public AjaxResult addSave(@RequestParam(value = "file", required = false) MultipartFile[] files)
  {
       if (files != null){
   		for (MultipartFile mf : files) {
			try {
				String originalFilename = mf.getOriginalFilename();
    			String filePath=Global.getUploadPath();
    			String fileUrl;
				fileUrl = FileUploadUtils.upload(filePath, mf);
				String suffix = mf.getOriginalFilename().substring(mf.getOriginalFilename().lastIndexOf(".") + 1);
    			JcEnclosure enclosure=new JcEnclosure();
    			enclosure.setParantId(jcCarBlacklist.getId());//父对象id
    			enclosure.setEnclosureSign("carBlacklist");
    			enclosure.setEnclosureName(originalFilename);
    			enclosure.setEnclosurePath(fileUrl);
    			enclosure.setEnclosureSize(Long.parseLong(BigDecimal.valueOf(mf.getSize())+""));
    			enclosure.setEnclosureType(suffix);
    			enclosure.setCreateBy(ShiroUtils.getLoginName());
    			enclosure.setCreateTime(DateUtils.getNowDate());
    			jcEnclosureService.insertJcEnclosure(enclosure);
			} catch (IOException e) {
				e.printStackTrace();
				return AjaxResult.error();
			}
   		}
	}
       return success(); 

  }

如果你有更好的上传下载，可以留言，互相学习！