文件$.ajaxFileUpload的实现(Spring MVC架构)

       前端时间，在做项目的时候，遇见了注册的时候有需要上传图片的情况。因为注册的时候，用户信息还没有生成，所以希望和注册信息一起提交。

网上也有许多$.ajaxFileUpload的说明，下面是自己实现的具体代码，希望能帮上各位。

前提：

引入jquery的js与文件ajax的js,注意2个的版本问题。

jquery-1.8.3.min.js

ajaxfileupload.js

为了支持多个图片的上传，ajaxfileupload.js做了一些修正如下。

 createUploadForm: function(id, fileElementId, data, fileElementTypeFlag)
	{
		//create form	
		var formId = 'jUploadForm' + id;
		var fileId = 'jUploadFile' + id;
		var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');	
		if(data)
		{
			for(var i in data)
			{
				jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
			}			
		}		
		
		if(fileElementTypeFlag == 'id'){
			//var oldElement = jQuery('#' + fileElementId);
			//var newElement = jQuery(oldElement).clone();
			//jQuery(oldElement).attr('id', fileId);
			//jQuery(oldElement).before(newElement);
			//jQuery(oldElement).appendTo(form);
			if (typeof (fileElementId) == 'string') {
	            fileElementId = [fileElementId];
	        }
			for(var i in fileElementId){    
			      var oldElement = jQuery('#' + fileElementId[i]);    
			      var newElement = jQuery(oldElement).clone();    
			      jQuery(oldElement).attr('id', fileId);    
			      jQuery(oldElement).before(newElement);    
			      jQuery(oldElement).appendTo(form);    
			}  
		}else{
			var oldElement = jQuery('.'+fileElementId);
			var newElement = jQuery(oldElement).clone();
			jQuery(oldElement).appendTo(form);
		}
		
		//set attributes
		jQuery(form).css('position', 'absolute');
		jQuery(form).css('top', '-1200px');
		jQuery(form).css('left', '-1200px');
		jQuery(form).appendTo('body');		
		return form;
    },

下面是前台与后台的代码，先执行文件的上传，上传成功后，返回上传的文件的保存路径，然后返回给前台，与注册的信息

一起插入数据库中。

$.ajaxFileUpload({
                url:'../../../../login_photoUpload',             //需要链接到服务器地址  
                secureuri:false,
                fileElementId:['photocardpath1','photocardpath2'],                         //文件选择框的id属性  
                dataType: 'json',                                     //服务器返回的格式，可以是json  
                success: function(data){
					if("success" == data.result){
						var code = loginname+",fh,"+password+",fh,"+email+",fh,"+realname+",fh,"+phonenumber+",fh,"+data.photocardpath1+",fh,"+data.photocardpath2;
						$.ajax({
							type: "POST",
							url: '../../../../login_regist',
					    	data: {KEYDATA:code,tm:new Date().getTime()},
							dataType:'json',
							async: false, 
							cache: false,
							success: function(data){
								if("success" == data.result){
									
									 $('#myModal2_2').modal('show');
								}else if("loginNameErr" == data.result){
									$("#registUsername").tips({
										side : 1,
										msg : "用户名重复",
										bg : '#FF5080',
										time : 10
									});
									$("#registUsername").focus();
								}else{
									$("#registUsername").tips({
										side : 1,
										msg : data.result,
										bg : '#FF5080',
										time : 10
									});
									$("#registUsername").focus();
								}
							}
						});
						
					}else{
						alert("证件上传失败，失败原因: " +data.result);
					}
				},
                error: function (data, status, e)             
                {  
                   alert("证件上传失败,注册失败！") 
                }  
              }  

java部分(SPRING+MVC)

	@RequestMapping(value="/login_photoUpload")
	@ResponseBody
	public Object login_photoUpload(
			@RequestParam(value="photocardpath1",required=false) MultipartFile photocardpath1,
			@RequestParam(value="photocardpath2",required=false) MultipartFile photocardpath2
			)throws Exception{
		
		String errInfo = "";
		Map<String,String> map = new HashMap<String,String>();
		String  ffile = DateUtil.getDays(), fileName1 = "",fileName2 = "";
		try {
			if (null != photocardpath1 && !photocardpath1.isEmpty()) {
				String filePath = PathUtil.getClasspath() + Const.FILEPATHIMG + ffile;		//文件上传路径
				fileName1 = FileUpload.fileUp(photocardpath1, filePath, this.get32UUID());				//执行上传正面身份证
				fileName2 = FileUpload.fileUp(photocardpath2, filePath, this.get32UUID());				//执行上传反面身份证
			}
			errInfo = "success";
		}catch (Exception e) {
			errInfo = "注册上传图片失败失败，errmsg="+ e.getMessage();
		}
	
		map.put("result", errInfo);
		
		map.put("photocardpath1", ffile+ File.separator +fileName1);
		map.put("photocardpath2", ffile+ File.separator +fileName2);
		return AppUtil.returnObject(new PageData(), map);
	}