简单可复用可自行扩展的附件上传（效果图在最下面）

HTML代码，添加附件按钮用的bootstrap的样式

<div class="choiceEnclosure">
		<!-- <span class="fileIcon" title="这是一条测试文件.png">
		<span>这是一条测试文件.png</span>
		</span> -->
		<input type="file" class="selEnclosureFile" multiple="multiple" style="display: none"/>
                <a href="javascript:void(0);" onclick="$('.selEnclosureFile').click()" class="btn btn-info" style="float:left">添加附件</a>
</div>

CSS样式

.choiceEnclosure .fileIcon{
	display: inline-block;
	float: left;
	height: 70px;
	width: 70px;
	overflow: hidden;
	/*background-image: url(/images/file-icon/excel.png);*/
	background-size: 50px;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    cursor: pointer;
    padding: 2px;
    margin-right: 10px;
}
.choiceEnclosure .fileIcon:HOVER{
	outline:#1296db solid 1px;
}
.choiceEnclosure .fileIcon img{height: 50px;}
.choiceEnclosure .fileIcon span{
	font-size: 12px;
	color: #444;
	display: block;
	position: absolute;
    bottom: 0px;
}

JS部分，用了jquery，layer，一些文件的图标可以去http://iconfont.cn/搜索使用

var imgSuffixs=["jpg","jpeg","png","bmp","gif","tif"];
var excelSuffixs=["xls","xlsx"];
var wordSuffixs=["doc","docx"];
var xmlSuffixs=["xml"];
var compressSuffixs=["7z","rar","zip","tar","iso","cab"];
//根据后缀名获取文件类型
function getSuffixsType(suffixs){
	if(typeof suffixs=="undefined"||suffixs==null||suffixs==""){
		return null;
	}
	var result={"suffixs":suffixs};
	if(imgSuffixs.indexOf(suffixs)!=-1){
		result["type"]="image";
		result["icon"]="/images/file-icon/file-image.png";
		return result;
	}
	if(excelSuffixs.indexOf(suffixs)!=-1){
		result["type"]="image";
		result["icon"]="/images/file-icon/excel.png";
		return result;
	}
	if(wordSuffixs.indexOf(suffixs)!=-1){
		result["type"]="image";
		result["icon"]="/images/file-icon/word.png";
		return result;
	}
	if(xmlSuffixs.indexOf(suffixs)!=-1){
		result["type"]="image";
		result["icon"]="/images/file-icon/xml.png";
		return result;
	}
	if(compressSuffixs.indexOf(suffixs)!=-1){
		result["type"]="image";
		result["icon"]="/images/file-icon/compress.png";
		return result;
	}
	if(suffixs=="txt"){
		result["type"]="text";
		result["icon"]="/images/file-icon/text.png";
		return result;
	}
	if(suffixs=="pdf"){
		result["type"]="pdf";
		result["icon"]="/images/file-icon/pdf.png";
		return result;
	}
	result["type"]="file";
	result["icon"]="/images/file-icon/file.png";
	return result;
}

var sel_=[];//选择的文件名集合
var sel_files=[];//选择的文件集合，方便删除操作
//选择附件
$(document).on("change",".selEnclosureFile",function(){
	var selFiles=this.files;//取得文件
	console.info(selFiles);
	for(var i=0;i<selFiles.length;i++){
		var fileName=selFiles[i].name;//文件名
		//判断是否上传的相同文件，有的话不重复加入
		if(sel_.indexOf(fileName)==-1){
			var suffix=fileName.split(".");//获得文件后缀 
			suffix=suffix[suffix.length-1];
			var result=getSuffixsType(suffix);//判断文件类型
			var html="<span class='fileIcon' title='"+fileName+"' style='background-image: url("+result.icon+");'>\
							<span>"+fileName+"</span>\
						</span>";
			$(this).before(html);
			sel_.push(fileName);
			sel_files.push(selFiles[i]);
		}
	}
	//清除文件域中的文件，防止删除文件后无法再次上传删除的文件
	$(this).val("");
})
$(document).on("click",".choiceEnclosure>.fileIcon",function(){
	var title=$(this).attr("title");
	var _this=this;
	//判断是否支持layer
	if(typeof layer!="undefined"){
		layer.confirm('请选择操作', {
			  btn: ['下载','删除','取消'] //按钮
		}, function(index){
			if(sel_.indexOf(title)!=-1){
				layer.msg("该文件尚未上传，请从本地获取");
			}else{//下载服务器文件
				var path=alreadyEnclosures[title].path;
				var fileName=alreadyEnclosures[title].fileName;
				window.location.href ="/affixFile_downloadFtpFile.do?fileName="+title+"&path="+path;
				layer.close(index);
			}
		}, function(){
			//未上传的文件，可以直接删除
			if(sel_.indexOf(title)!=-1){
				$(_this).remove();//删除元素
				sel_.splice(sel_.indexOf(title),1);//未上传数组中删除对应元素
				//删除文件集合中的文件对象
				for(var k=0;k<sel_files.length;k++){
					var file=sel_files[k];
					if(file.name==title){
						sel_files.splice(k,1);
						break;
					}
				}
			}else{//删除服务器文件
				var id=alreadyEnclosures[title].id;
				var index = null;
                //这里判断是因为我的页面在一个弹窗里，需要遮住父页面
				if(typeof parent.layer!="undefined"){
					index = parent.layer.msg('正在执行删除...', {icon: 16,time:240000,shade: 0.2});
				}else{
					index = layer.msg('正在执行删除...', {icon: 16,time:240000,shade: 0.2});
				}
				$.ajax({
					url:"/affixFile_deleteFile.do",
					type:"post",
					data:"fileId="+id,
					dataType:"json",
					success:function(data){
						if(data.status==0){
							layer.msg(data.message);
						}else{
							if(typeof parent.layer!="undefined"){
			            		parent.layer.close(index);
			    			}else{
			    				layer.close(index);
			    			}
							$(_this).remove();//删除对应文件
							delete alreadyEnclosures[title];
						}
					}
				})
			}
		});
	}else{
		
	}
})
//上传附件
function uploadEnclosureFile(url,param){
	return new Promise((resolve, reject)=>{
		//resolve("成功");
		if(sel_files.length>0){
			var index = null;
			if(typeof parent.layer!="undefined"){
				index = parent.layer.msg('正在上传文件...', {icon: 16,time:240000,shade: 0.2});
			}else{
				index = layer.msg('正在上传文件...', {icon: 16,time:240000,shade: 0.2});
			}
			var data=new FormData();
			//data.append("files",sel_files);
			for (var i=0;i<sel_files.length;i++){
		        data.append('files',sel_files[i]);
		    }
			data.append('param',JSON.stringify(param));
		    $.ajax({
	            url: url,
	            type: "POST",
	            processData: false, // 告诉jQuery不要去处理发送的数据
	            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
	            cache: false,
	            data: data,
	            timeout: 240000,
	            success: (result) => {
	            	if(typeof parent.layer!="undefined"){
	            		parent.layer.close(index);
	    			}else{
	    				layer.close(index);
	    			}
	            	var failFile=result.failFile;//失败文件
	            	//存在失败文件
	            	if(failFile!=""){
	            		failFile=failFile.split(",");
	                	for(var i=0;i<failFile.length;i++){
	                		if(failFile[i]!=""){
	                			$("span[title='"+failFile[i]+"']").remove();//删除上传失败的元素
	                		}
	                	}
	            	}
	            	sel_=[];//清空未上传数组
	    			sel_files=[];//清空未上传文件数组
	                resolve(result);
	            },
	            error : (code) => {
	                reject(code);
	            }
		    })
		}else{
			resolve({state:0});
		}
	})
}
var alreadyEnclosures={};
//用于回显附件。参数需包含fileName（原始文件名）、path（存放路径，用于文件下载）、id（用于文件删除）
function showEnclosureFile(arrObject){
	//判断是否是数组
	if(typeof arrObject=="object"&&arrObject.length>0){
		var html="";
		for(var i=0;i<arrObject.length;i++){
			var obj=arrObject[i];
			var suffix=obj.fileName.split(".");//获得文件后缀 
			suffix=suffix[suffix.length-1];
			var result=getSuffixsType(suffix);//判断文件类型
			html+="<span class='fileIcon' title='"+obj.fileName+"' style='background-image: url("+result.icon+");'>\
					<span>"+obj.fileName+"</span>\
				</span>";
			alreadyEnclosures[obj.fileName]={"path":obj.path,"id":obj.id}
		}
		$(html).prependTo(".choiceEnclosure");
	}
}

页面回显需要写在页面加载中，后台返回一个json集合字符串

$(function(){
		var a='${jsonarr}';
		a=eval(a);
		//回显附件
		showEnclosureFile(a);
});

function save(){
        //调用上传附件
       uploadEnclosureFile("${basePath}/mantainMonthlyProgressReport_uploadEnclosure.do",{pid:"${pid}"}).then(function(data){
			if(data.state==0){
				var index = parent.layer.msg('正在保存...', {icon: 16,time:240000,shade: 0.2});
                //先保存附件后再执行保存表单
				$.ajax({
					//url:"${basePath}/mantainMonthlyProgressReport_save.do",
					data:$("#myForm").serialize(),
					dataType:"json",
					success:function(data){
						 parent.layer.close(index);
						if(data.state==0){
							layer.msg("保存成功",function(){});
						}
					},
					error:function(){
						parent.layer.close(index);
						layer.msg("保存出错",function(){});
					}
				})
			}else{
				layer.alert(data.msg+"（失败文件："+data.failFile+"）",function(){});
			}
			
		})
}

JAVA部分，保存上传附件

/**
	 * 上传附件
	 * @return
	 */
	public String uploadEnclosure(){
		CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
		jsono.put("msg", "上传成功");
		jsono.put("failFile", "");
		jsono.put("state", 0);
	    // 先判断request中是否包涵multipart类型的数据，
	    if (multipartResolver.isMultipart(request)) {
	    	MultiPartRequestWrapper multiRequest = (MultiPartRequestWrapper) request;
	    	//上传的文件
	    	File[] files=multiRequest.getFiles("files");
	    	//上传的所有文件名
	    	String[] fileNames=multiRequest.getFileNames("files");
            //参数
	    	String[] param=multiRequest.getParameterValues("param");
	    	JSONObject param2=null;
	    	String pid="";
	    	if(param.length>0){
	    		String param1=param[0];
	    		param2=JSONObject.fromObject(param1);
	    		pid=param2.getString("pid");
	    	}
	    	if(param2==null){
	    		pid="";
	    	}
	    	Information in=informationService.find(pid);
	    	//2018长沙市浏阳市G106MonthlyProgressReport_Enclosure
	    	String bizId=in.getIssued_year()+in.getCity()+in.getCounty()+in.getRoute_code()+"MonthlyProgressReport_Enclosure";
	    	for (int i = 0; i < files.length; i++) {
	    		AffixFile affixFile=new AffixFile();
	    		affixFile.setBizId(bizId);
	    		affixFile.setFileName(fileNames[i]);
	    		affixFile.setUploadUser(getOperator().getName());
	    		//上传文件到ftp
	    		String path=affixFileService.saveUploadFileToFtp(files[i], affixFile.getFileName());
	    		if(path==null){
	    			jsono.put("msg", "文件上传失败");
	    			jsono.put("failFile", jsono.get("failFile")+fileNames[i]+",");
	    			jsono.put("state", 1);
	    		}else{
	    			affixFile.setUploadTime(new Date());
					affixFile.setPath(path);
					affixFile.setFileSize(0);
					affixFileService.save(affixFile);
	    		}
			}
	    	System.out.println(jsono);
	    }
	    
		return "success";
	}

效果图

多选文件，每个文件对应不同图标

上传文件

点击图标弹出询问框