簡單可複用可自行擴展的附件上傳（效果圖在最下面）

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";
	}

效果圖

多選文件，每個文件對應不同圖標

上傳文件

點擊圖標彈出詢問框