图片上传（二）

浏览数：23 / 时间：2015年06月09日

这种方法需要提交form表单，再跳转页面（没有第一种方法好）：

一、JSP代码：

<div class="tphoto" name="head_img" id="head_img">
    <input type="file" name="file" onchange="previewImage(this)" />
    <div id="preview">
        <img id="imghead" border=0 src=‘${ctx}/static/images/elearning/photo_teacher.png‘>
    </div>
</div>

二、JS代码：

//图片上传
    function previewImage(file) {
          var MAXWIDTH  = 100;
          var MAXHEIGHT = 100;
          var div = document.getElementById(‘preview‘);
          if (file.files && file.files[0]){
              div.innerHTML = ‘<img id=imghead>‘;
              var img = document.getElementById(‘imghead‘);
              img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width = rect.width;
                    img.height = rect.height;
                    img.style.marginLeft = rect.left+‘px‘;
                    img.style.marginTop = rect.top+‘px‘;
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          } else {
            var sFilter=‘filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="‘;
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = ‘<img id=imghead>‘;
            var img = document.getElementById(‘imghead‘);
            img.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =(‘rect:‘+rect.top+‘,‘+rect.left+‘,‘+rect.width+‘,‘+rect.height);
            div.innerHTML = "<div id=divhead style=‘width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"‘></div>";
          }
    }
    
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
        var param = {top:0, left:0, width:width, height:height};
        if( width>maxWidth || height>maxHeight ) {
            rateWidth = width / maxWidth;
            rateHeight = height / maxHeight;
            
            if( rateWidth > rateHeight ) {
                param.width =  maxWidth;
                param.height = Math.round(height / rateWidth);
            } else {
                param.width = Math.round(width / rateHeight);
                param.height = maxHeight;
            }
        }
        
        param.left = Math.round((maxWidth - param.width) / 2);
        param.top = Math.round((maxHeight - param.height) / 2);
        
        return param;
    }

三、后台Java代码：

/**
     * 
     * @Title: insert 
     * @Description: 新增 
     * @param @param params
     * @param @param request
     * @param @return
     * @return MessageResp
     * @throws
     */
    @RequestMapping("/insert")
    public ModelAndView insert(Model model, TrainerQueryParam params, HttpServletRequest request, MultipartFile file) {
        ModelAndView view = new ModelAndView();
        User u = SessionUtils.getUser(request.getSession());

        /**
         * 把前端传过来的参数对象中要更新的属性转到model实体类相应的字段属性中， 可以通过通用的转化实现
         * */
        Trainer trainer = new Trainer();
        
        try {
            BeanUtils.copyProperties(trainer, params);//前面的是目标,后面的是源对象
        } catch (IllegalAccessException e) {
            throw new AjaxBusinessException("新增出错！");
        } catch (InvocationTargetException e) {
            throw new AjaxBusinessException("新增出错！");
        }
        
        trainer.setId(UUIDUtil.getUUID()); //ID
        trainer.setCorpId(SessionUtils.getCorpId(request.getSession()));
        
        try {
           
            if(!file.isEmpty()){
                //获得工程下面upload资源包路径，当然这个包是已经存在的了
                String path = request.getSession().getServletContext().getRealPath("upload/trainer_picture");
                
                //上传的图片的名称
                String fileName = file.getOriginalFilename();
                String newfileName = UUIDUtil.generateGUID() + fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
                
                //下面是upload路径盘符的转化        
                StringBuffer importPath = new StringBuffer();
                String temp[] = path.split("\\\\");
                
                for (int i = 0; i < temp.length; i++) {
                    importPath.append(temp[i]);
                    importPath.append("/");
                }
                
                importPath.append(newfileName);
                //看是否存在upload包，没有则会新建一个upload包，作为资源上传的路径
                File targetFile = new File(path, newfileName);
                if (!targetFile.exists()) {
                    targetFile.mkdirs();
                }
                
                //文件上传
                file.transferTo(targetFile);
                
                trainer.setHeadImg(newfileName);
            }
            
            if (trainerService.insert(trainer) == 1) {
                resp.setResult("true");
                resp.setResultDesc("新增成功！");
            }
        } catch (Exception e) {
            resp.setResult("false");
            resp.setResultDesc("新增出错！");
        }
        
        //model.addAttribute("trainerResp", trainerResp);
  　　　 //model.addAttribute("srList", srList);
  
  　　   view.setViewName("views/xxx/manage/xxxinfo");
  
  　　   return view;
    }