文件$.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);
	}









 

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

SpringMVC与ajaxfileupload.js实现多个文件同时上传

SpringMVC与ajaxfileupload.js实现多个文件同时上传
  • ranger2
  • ranger2
  • 2016年08月31日 00:25
  • 1733

ajaxFileUpload+Struts2文件上传

前台:     1. 引入ajaxFileUpload.js文件       2. 前台通过input type=file文件的onchange方法去调用上传js代码 如果想在执行ajax代码以后控...
  • qq_33082731
  • qq_33082731
  • 2016年10月09日 11:34
  • 357

Spring MVC+ajaxfileupload实现文件上传下载

一、框架相关1、jar包引入 首先引入common-fileupload.jar文件,但是因为common-fileupload是依赖于common-io这个包的 而commons-lang3包含...
  • xiaoshiyiqie
  • xiaoshiyiqie
  • 2016年08月11日 15:35
  • 3020

使用ajaxfileupload插件上传文件取不到值

js: $.ajaxFileUpload({ url: "test.do", secureuri: false,//同步 ...
  • qq_24378737
  • qq_24378737
  • 2017年07月12日 23:09
  • 114

文章标题 使用ajaxFileupload+struts2完成文件的上传以及回显到jsp的链接地址

积累点滴,从这一刻开始 jsp页面部分 第一步: jsp页面导入 ajaxfileupload.js文件 第二步:编写上传文件的文本框: 第三步: struts2后台部...
  • oppolol9527
  • oppolol9527
  • 2016年05月10日 23:17
  • 860

SpringMVC结合ajaxfileupload.js实现ajax无刷新文件上传

一、spring mvc配置1、web.xml
  • javaloveiphone
  • javaloveiphone
  • 2016年12月20日 10:12
  • 3794

ajaxfileupload文件上传返回值处理 ajaxfileupload.js + spring mvc文件上传

ajaxfileupload.js组件的确好用,但是那个发挥zhi
  • guxing820
  • guxing820
  • 2014年10月21日 19:40
  • 2534

使用ajaxfileupload同时上传多个文件

ajaxFileupload这个插件用于上传文件,不过它默认是只能上传一个文件。通过修改其源代码,可以方便地实现多个文件上传。 ajaxFileupload的原理挺简单的,它将用户指定(通过ID...
  • ybb350680013
  • ybb350680013
  • 2014年10月29日 16:51
  • 4729

ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

先上几张图更直观展示一下要实现的功能,本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPO...
  • fuyifang
  • fuyifang
  • 2015年06月02日 23:52
  • 5677

关于ajaxfileupload.js插件及其多上传的使用

关于ajaxfileupload.js插件的使用众所周知,jsp中是无法使用ajax进行上传操作的,其实ajaxfileupload.js插件的使用也不过就是封装好的iframe,但是确实为我们的上传...
  • guanglancomet
  • guanglancomet
  • 2015年10月22日 13:58
  • 1956
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:文件$.ajaxFileUpload的实现(Spring MVC架构)
举报原因:
原因补充:

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