订餐系统的异步上传图片记录

共用的上传页面：

 <form action="/restaurant/uploadAvatar/file" method="post" enctype="multipart/form-data">  
      <input type="file" name="file" /> 
      <input type="hidden" name="callback" value="${(callback)!''}"/>
      <input type="submit" value="上传" />
      <div>仅支持jpg,bmg,png,gif格式上传</div>
    </form>

引用共用上传页面的模板页（使用iframe：）通过js引用上面的页面

 <div class="form-group">
         <div class="col-md-2 control-label"><label for="form_newPassword" class="required">头像</label></div>
             <div class="col-md-8 controls">
		         <img src="${(user.avatar)!''}" id="user_preview_img"  /><br/>
		         <input type="text" value="${(tg_content_txt)!''}" name="tg_content_txt" style="width:120px" />
		         <input type="button" class="btn btn-success" value="上传图片" uimg="parent.input[name=tg_content_txt]" />
		      </div>
        </div>

使用引用的js代码如下：

$.uimg = {
		draw: function(node){
			var uimg = $(node);
			
			$.uimg.make_iframe(uimg);

			uimg.bind("click.uimg", function(){
				var uimg = $(this);
				var file = this.uiframe.contents().find("input[type=file]");
				file.bind("change", function(){
					$.uimg_node = uimg;
					file.parents("form:first").submit();
				});
				file.click();
			});
		},
		callback: function(status,text,url){
			var input_class = $.uimg_node.attr("uimg");
			var input = null;
			if (input_class.indexOf("parent.")==0){
				input = $.uimg_node.parent().find(input_class.replace("parent.", ""));
			} else {
				input = $(input_class);
			}
			input.val(url);
			$("#imglink").append("<img src='"+url+"' width='500' height='200'/>");
			$("#user_preview_img").attr("src", url);
			$("#user_preview_img").css("display", "block");
			//$("a#piclink").attr("href", url);
			//window.parent.alertMsg.correct('上传成功');
			
		     ////jcrop头像裁剪

			//恢复form
			$.uimg.make_iframe($.uimg_node);
		},
		make_iframe: function(uimg){
			try{$(uimg)[0].uiframe.remove();}catch(e){}
			var url = "http://localhost:8080/restaurant/uploadAvatar?callback=parent.jQuery.uimg.callback";
			var iframe = $("<iframe class='uimg_iframe' style='display:none'></iframe>");
			iframe.attr("src", url);
			iframe.attr("frameborder", 0);
			//iframe.attr("width", 0);
			//iframe.attr("height", 0);
			$(top.document.body).append(iframe);
			$(uimg)[0].uiframe = iframe;
		}
	}
	$.fn.uimg = function() {
		$.uimg.draw(this);
	}

页面中使用的js如下：

<script>
setTimeout(function(){
	$("input[name=tg_position]").each(function(){
		if ($(this).val()=="${(tg_position)!''}") {
			$(this).attr("checked", "1");
		}
	});

	var tg_content = "${(tg_content)!''}";
	tg_content_type = tg_content.substring(0, tg_content.indexOf(":"));
	tg_content_txt = tg_content.substring(tg_content.indexOf(":")+1);
	$("input[name=tg_content_type][value="+tg_content_type+"]").attr("checked", "1");


	$("input[uimg]").uimg();
},50);
function init_tg_content(o){
	var type = $(o).find("input[name=tg_content_type]:checked").val();
	var txt = $(o).find("input[name=tg_content_txt]").val();
	$(o).find("input[name=tg_content]").val(type+":"+txt);
	return true;
}
</script>

js请求的url所执行的方法：

    ///js回调语句 post进来的url
    @RequestMapping(value="/uploadAvatar",method = {RequestMethod.GET,RequestMethod.POST})
    public ModelAndView uploadimages(HttpServletRequest request,HttpServletResponse response){
        ModelAndView mav=new ModelAndView();
        String callback=request.getParameter("callback");
        System.out.println("----"+callback);
        mav.addObject("callback", callback);
        mav.setViewName("/app/uploadAvatar");
        return mav;
    }

共用页面请求的路径，所执行的上传图片函数：

    
    ///ifreame引用的post过来的url(即iframe包含的通用的一个上传页面)
    @RequestMapping(value="/uploadAvatar/file",method = {RequestMethod.GET,RequestMethod.POST})
    public String uploadImages(@RequestParam(value = "file", required = false) MultipartFile file, 
            HttpServletRequest request, HttpServletResponse response) throws IOException {
            
        response.setContentType("text/html,charset=UTF-8");  
        PrintWriter out=response.getWriter();  
            ModelAndView mav =new ModelAndView();  
            String path = request.getSession().getServletContext().getRealPath("/resources/images/uploadAvatar/");  
            String fileName = file.getOriginalFilename();
            String type=fileName.substring(fileName.lastIndexOf("."),fileName.length());
            SimpleDateFormat sdFormat=new SimpleDateFormat("yyyyMMddhhmmss");
            String name=sdFormat.format(new Date());
            fileName=name+type;
            System.out.println("---"+type);
//          String fileName = new Date().getTime()+".jpg";  
            System.out.println("path"+path);  
            File targetFile = new File(path, fileName);  
            if(!targetFile.exists()){  
                targetFile.mkdirs();  
            }  
      
            //锟斤拷锟斤拷  
            try {  
                file.transferTo(targetFile);  
            } catch (Exception e) {  
                e.printStackTrace();  
            }  
            //model.addAttribute("fileUrl", request.getContextPath()+"/uploadImages/"+fileName);
           
            ImgUploadHandle uimg=new ImgUploadHandle();

            String outputDir1=path+"/avatar01/";

            String urlPath=path+"/";
            System.out.println("gggggg"+urlPath);
            uimg.compressPic(urlPath, outputDir1, fileName, fileName, 140, 140, false);
        
           //uimg.compressPic(urlPath, "e:\\", fileName, fileName, 400, 230, false);
            
            
            
            //System.out.println("输入的图片大小：" + uimg.getPicSize(path+"/"+fileName)/1024 + "KB"); 
           // System.out.println("com");

            mav.addObject("fileUrl", request.getContextPath()+"/resources/images/uploadAvatar/"+fileName);
            mav.setViewName("/upload/uploadSuccess");
            String urlString=request.getContextPath()+"/resources/images/uploadAvatar/avatar01/";
            System.out.println("==="+urlString);
            String callback=request.getParameter("callback");
            System.out.println("-+++---"+callback);
            StringBuilder sb = new StringBuilder();
            sb.append("<script>parent.jQuery.uimg.callback(true, '', 'http://localhost:8080"+urlString+""+fileName+"');</script>");
            
            out.print(sb);
        return null;
        
    }

执行上传函数后，返回相关参数到js，js执行回调函数，用户可以预览到自己上传的图片