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

来源：互联网发布：东北大学网络电视网址编辑：程序博客网时间：2024/05/28 05:15

共用的上传页面：

 <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执行回调函数，用户可以预览到自己上传的图片

4 0