ajaxFileUpload+springMvc 多文件上传

最新推荐文章于 2024-09-07 10:07:41 发布

itlayer

最新推荐文章于 2024-09-07 10:07:41 发布

阅读量106

点赞数

分类专栏： web前端文章标签： java javascript 前端 ViewUI

本文链接：https://blog.csdn.net/itlayer/article/details/84696847

版权

web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.xml配置


<bean id="multipartResolver"  
    class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >  
    <!-- set the max upload size1MB   1048576     -->  
    <property name="maxUploadSize">  
        <value>52428800</value>  
    </property>  
    <property name="maxInMemorySize">  
        <value>2048</value>  
    </property>  
</bean>

2.后端


@RequestMapping("/wxupload.html")
	public String upload(MultipartHttpServletRequest multipartRequest,
			HttpServletResponse response,ModelMap model) throws Exception{
		AppointmentVo appointment = (AppointmentVo) this.getSessionObject(multipartRequest, "appointment");
		if(appointment == null){
			model.put("result", "0");
			//return "front/success";
			this.writerResponse(response, "0");
			return null;
		}
//		String frontIdCardInfoName=(String) multipartRequest.getFileNames().next();
//		String backIdCardInfoName=(String) multipartRequest.getFileNames().;
		int i=0;
		String path = loader.getProperty("pang.upload");
		String customerId = appointment.getCustomerId();
		AppointCustomer ac = new AppointCustomer();
		ac.setCustomerId(customerId);
		for (Iterator it = multipartRequest.getFileNames(); it.hasNext();) {  
			String key = (String) it.next();  
	        MultipartFile imgFile = multipartRequest.getFile(key);
	        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSS");
			String frontName = Utils.getFileName(imgFile.getOriginalFilename());
			String frontType = Utils.getFileType(imgFile.getOriginalFilename());
			String frontIdCardInfoName = frontName +"_"+ sdf.format(new Date())+frontType;
			File frontTargetFile = new File(path+"/"+frontIdCardInfoName);
			if(!frontTargetFile.exists()){
				frontTargetFile.mkdirs();
			}
			imgFile.transferTo(frontTargetFile);//保存图片
	        if(i==0)
	        {
	        	ac.setFrontIdCardInfo(path+"/"+frontIdCardInfoName);

	        }else
	        {
	        	ac.setBackIdCardInfo(path+"/"+frontIdCardInfoName);
	        }
	        i++;

		}
			try{
				this.appointCustomerService.update(ac);
				model.put("message", "上传身份证信息成功");
				this.writerResponse(response, "2");
			}catch(Exception e){
				model.put("message", "上传身份证信息失败");
				this.writerResponse(response, "1");
				e.printStackTrace();
			}
		return null;
		//return "front/success";
	}

3.修改ajaxFileUploadFile.js的源码
将源文件的createUploadForm的代码替换如下：


    createUploadForm: function(id, fileElementId, data)  
            {  
                //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);  
                    }  
                }  
                for (var i = 0; i < fileElementId.length; i ++) {  
                    var oldElement = jQuery('#' + fileElementId[i]);  
                    var newElement = jQuery(oldElement).clone();  
                    jQuery(oldElement).attr('id', fileElementId[i]);  
                    jQuery(oldElement).attr('name', fileElementId[i]);  
                    jQuery(oldElement).before(newElement);  
                    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;  
            }

4.这里可以专门写封装类，以及给file加onchange事件判断文件格式。由于时间有限，未修改


[javascript] view plaincopyprint?

    var count = 1;  
    /** 
    * 生成多附件上传框 
    */  
    function createInput(parentId){  
        count++;  
        var str = '<div name="div" ><font style="font-size:12px;">附件</font>'+  
        '   '+ '<input type="file" contentEditable="false" id="uploads' + count + '' +  
        '" name="uploads'+ count +'" value="" style="width: 220px"/><input type="button"  value="删除" onclick="removeInput(event)" />'+'</div>';  
        document.getElementById(parentId).insertAdjacentHTML("beforeEnd",str);  
    }  
    /** 
    * 删除多附件删除框 
    */  
    function removeInput(evt, parentId){  
       var el = evt.target == null ? evt.srcElement : evt.target;  
       var div = el.parentNode;  
       var cont = document.getElementById(parentId);         
       if(cont.removeChild(div) == null){  
        return false;  
       }  
       return true;  
    }

5.下面是2个修改多file用的js，用于显示和删除，可以于上面的合并精简代码


[javascript] view plaincopyprint?

    function addOldFile(data){  
        var str = '<div name="div' + data.name + '" ><a href="#" style="text-decoration:none;font-size:12px;color:red;" onclick="removeOldFile(event,' + data.id + ')">删除</a>'+  
        '   ' + data.name +   
        '</div>';  
        document.getElementById('oldImg').innerHTML += str;  
    }  

    function removeOldFile(evt, id){  
        //前端隐藏域，用来确定哪些file被删除，这里需要前端有个隐藏域  
        $("#imgIds").val($("#imgIds").val()=="" ? id :($("#imgIds").val() + "," + id));  
        var el = evt.target == null ? evt.srcElement : evt.target;  
        var div = el.parentNode;  
        var cont = document.getElementById('oldImg');      
        if(cont.removeChild(div) == null){  
            return false;  
        }  
        return true;  
    }

6.ajax上传文件:


[javascript] view plaincopyprint?

    function ajaxFileUploadImg(id){  
            //获取file的全部id  
            var uplist = $("input[name^=uploads]");  
        var arrId = [];  
        for (var i=0; i< uplist.length; i++){  
            if(uplist[i].value){  
                arrId[i] = uplist[i].id;  
            }  
            }  
        $.ajaxFileUpload({  
            url:'xxxxx',  
            secureuri:false,  
            fileElementId: arrId,  //这里不在是以前的id了，要写成数组的形式哦！  
            dataType: 'json',  
            data: {  
                         //需要传输的数据  
                    },  
            success: function (data){  
            },  
            error: function(data){  
            }  
        });  
    }