文件$.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 formvar 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 attributesjQuery(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")@ResponseBodypublic 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);}