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

原创 2015年11月20日 15:27:31

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

网上也有许多$.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);
	}









 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Spring MVC实现CRM系统架构

毕业一年多,一直在忙自己的项目,也没什么时间写点东西,这真是一件很失败的事情。然后到今天,终于有空对自己有个总结了,总结最近这几个月所学到的东西,下面我就是我独立设计研发的CRM所使用的架构(Spri...

Spring3.0.5MVC + ajaxfileupload无刷新文件上传

系统版本:spring3.0.5MVC+Hibern

spring MVC +Mybatis实现的文件上传

  • 2017年04月19日 10:10
  • 73KB
  • 下载

Spring MVC 监听文件上传进度,实现上传进度条

首先Spring是一个非常成熟的J2EE框架,其非入侵式的架构为系统的集成和扩展提供了最大的可能。所以Spring MVC下实现进度监听非常容易,甚至不需要改以前的上传业务代码,具体实现分三个步骤:1...

spring mvc 架构源代码

  • 2015年09月07日 16:38
  • 21.91MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文件$.ajaxFileUpload的实现(Spring MVC架构)
举报原因:
原因补充:

(最多只允许输入30个字)