实现多文件上传（使用java与js）

今天项目需要用到多文件上传于是自己写了一个 分享给大家。

首先应用的的input file 控件 通过 ajax 封装的一个上传方式 先上前台代码不上代码的都不是好人

<input id ="attachmentInfo" type="hidden" name="attachment" value="${pd.attachment}">
<c:choose>
<c:when test="${pd.attachment != null }">
																		    
<div id="uploadMsg" style="float: left; border: 1px solid #d0d0d0;">
<c:forEach items="${attachmentList}" var="attach"> 
<div value ="${attach.getUrlDo()}" style="float:left;height:27px;margin-right: 5px;padding-left: 3px;border: 1px solid #d0d0d0;" ><a href="javascript:;" onclick="downFile('${attach.getUrlDo()}')">${attach.getFilename()}</a><img id ="imgId"  src="static/layer/image/icon/chahao.png"></div>
  </c:forEach>																				
</div>
</c:when> 
<c:otherwise>
<div id="uploadMsg"	style="float: left;"></div>
</c:otherwise>
</c:choose>
<input style="left: -9999px; position: absolute;" multiple type="file" id="files" name="files" onchange="upfile(this,'upload/uploadFiles.json','fileNames','#uploadMsg')" />
<button  type="button"onclick="javascript:$('#files').click()" class="layui-btn layui-btn-sm" style="height: 24px; line-height: 24px; float:left">
<i class="layui-icon">&#xe67c;</i>上传附件</button>

声明全区变量：

var data = $("input[name='attachment']");//为上传隐藏域的选择做准备

加上这个函数

function upfile(obj,url,message,idnm){
			//data: 需要存放路径的input
			
			ajaxFileUploads(obj,url,data,idnm);
		}
		

加上初始函数：

	$('#uploadMsg').find('img').click(function(i) {
					$(this).parent().remove();
					var arr =new Array();
					var str =$(data).val();
					var value ="";
					arr = str.split(',');
					for(var i=0;i<arr.length;i++)
					{
						if($(this).parent().attr("value") == arr[i]){
							arr[i] =',';
						}
						if(i == arr.length-1){
							value += arr[i]
						}else{
							value += arr[i]+",";
						}	
					}
					var substrone = value.substring(0,1);
					if(substrone ==","){
					 value = value.substr(1,value.length-1);
					 value = value.replace(",,","").substr(1,value.length-1);
					 $(data).val(value);
					}else{
					$(data).val(value.replace(",,",""));
					}
					
			})

这样前台就好啦接下来上js文件

var idImg ="";
$(document).click(function(e) { // 在页面任意位置点击而触发此事件
	idImg = $(e.target).attr("id");
})

	/**
	 * 附件上传
	 * @param e file对象
	 * @param url 上传路径
	 * @returns
	 */
	function ajaxFileUploads(e, url,obj,idnm) {
		var addImags =$(e).prop('files');
	    var fileSize=0;
	    for(var i=0;i<addImags.length;i++){
	      fileSize=$(addImags)[i].size; 
		      if(fileSize > _file_msx){
		        boxAlert("文件超过默认大小(10MB)");
		        return;
		      }
	    }
		var id = $(e).attr('id');
		$.ajaxFileUpload({
			url : url,
			secureuri : false,
			fileElementId : id,
			dataType : 'json',
			success : function(data) // 服务器成功响应处理函数
			{
				if(data.data.fail==3){//上传失败
					boxAlert(data.data.fileName+"   文件名中包含\"  ,   \"不能上传！");
					return ;
				
				}else if(data.data.fail==2){//上传失败
					boxAlert("不能上传&nbsp;"+ data.data.fileType  +"&nbsp;类型的文件");
					return ;
				}
				//文件名				
				var listFileName = data.data.listFileName;
				//文件路径
				var listSeverPath = data.data.listServerPath;
				//listSeverPath = listSeverPath[i].replace(/\\/g, "\\\\");
			   if($(obj).val()!=null && $(obj).val()!="" && idImg !="imgId"){
					var url =$(obj).val();
					$(obj).val(url+","+listSeverPath);
				}else
				{
				$(obj).val(listSeverPath); 
				}
				boxAlert("上传成功！");
				
				for(var i =0;i<listFileName.length;i++){
				
					$(idnm).append('<div value ="'+listSeverPath[i]+'" style="float:left;height:27px;margin-right: 5px;padding-left: 3px;border: 1px solid #d0d0d0;" >'+listFileName[i]+'<img id ="imgId"  src="static/layer/image/icon/chahao.png"></div>');
				}
				$(idnm).find('img').click(function(i) {
					$(this).parent().remove();
					var arr =new Array();
					var str =$(obj).val();
					var value ="";
					arr = str.split(',');
					for(var i=0;i<arr.length;i++)
					{
						if($(this).parent().attr("value") == arr[i]){
							arr[i] =',';
						}
						if(i == arr.length-1){
							value += arr[i]
						}else{
							value += arr[i]+",";
						}	
					}
					var substrone = value.substring(0,1);
					if(substrone ==","){
					 value = value.substr(1,value.length-1);
					 $(obj).val(value.replace(",,",""));
					}else{
					$(obj).val(value.replace(",,",""));
					}

				});
				
			},
			error : function() {
				boxAlert("上传失败,文件可能为空文件");
			}
		});
		return ;
	}

剩下的就是自己后台转值了最主要的函数为这个按照自己的来

if (pd.get("attachment") != null) { 
			String attachment = findList.get(0).getString("attachment").trim();//所对应的路径
			String[] attarray =attachment.split(",");//通过逗号分块
			List<URL> attachmentList =new ArrayList<>();
			for (int i = 0; i < attarray.length; i++) {		
				 URL url =new URL();//实体
				 url.setFilename( Utility.getFileNamePath(attarray[i]));//设置文件名
				 url.setUrlDo(attarray[i]); //设置路径
				 attachmentList.add(url);			
			}
			mv.addObject("attachmentList",attachmentList);
			}	

工具类Utility.getFileNamePath

/**
	 * 从路径中提取文件名
	 * 
	 * @param reportData
	 * @return
	 * @Description:
	 */
	public static String getFileNamePath(String path) {
		String fileName = path.substring(path.lastIndexOf("/") + 1);
		if (fileName.indexOf("&") != -1) {
			fileName = fileName.split("&")[1];
			return fileName;
		} else {
			return fileName;
		}
	}

实体类URL

package com.fh.entity;

public class URL {
  
	private String url;
	private String filename;
	public String getUrlDo() {
		return url;
	}
	public void setUrlDo(String url) {
		this.url = url;
	}
	public String getFilename() {
		return filename;
	}
	public void setFilename(String filename) {
		this.filename = filename;
	}
	
}

这样就好了