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

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

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

																		    

 
${attach.getFilename()}
  																				

 






上传附件

声明全区变量：

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

这样前台就好啦接下来上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 _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("不能上传 "+ data.data.fileType  +" 类型的文件");
					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[i]+'

'); } $(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

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

if (pd.get("attachment") != null) { 
			String attachment = findList.get(0).getString("attachment").trim();//所对应的路径
			String[] attarray =attachment.split(",");//通过逗号分块
			List 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;
	}
	
}

这样就好了