图片上传(二)

这种方法需要提交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;
    }
时间: 2024-11-01 16:31:33

图片上传(二)的相关文章

ckeditor图片上传二三事

最近实验室要用ckeditor,踩了几个小坑记录下. 1.出现iframe跨域问题 response.setHeader("X-Frame-Options", "SAMEORIGIN");或者在websecurityconfig中添加http.headers().frameOptions().disable(); 2.接参一定要注意前台file的name是什么

数往知来 JQuery 图片上传_水印 &lt;二十二&gt;

一.图片上传  :enctype='multipart/form-date 首先在进行文件上传时,添加form表单中的enctype属性指定enctype='multipart/form-date', 文件数据发送给服务端,并不是把文件路径发送给服务端了,它会随机生成一个分割字符串, 把每一个表单元素分割开 <form method='post' action='' enctype='multipart/form-date'> //这里的enctype是提交请求报文的报文体的一种编码格式, 默

SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器

一.参数的传递 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px Helvetica } 1.简单的参数传递 1 /* @RequestParam用法:入参名字与方法名参数名不一致时使用{ 2 * value:传入的参数名,required:是否必填,defaultValue:默认值 3 * } 4 */ 5 @RequestMapping("itemEdit") 6 public ModelAndView itemEdit(@R

微信小程序开发(二)图片上传+服务端接收

文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 前几天做了图片上传功能,被坑了一下.我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居然是个String,也就是 只能每次传一张图片,我以前的接口都是接收一个array,我本人又是一个半吊子的php,只能自己去改接收图片的接口. 看一下页面效果图 一个很常见的修改头像效果,选择图片(拍照),然后上传. 下面就是贴代码了 首先是小程序的

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)

上一篇只讲到前台操作,这篇专门涉及到Java后台处理,前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理,通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至服务器进行保存,并且将图片的路径地址存进数据库.ok,废话不多说了,直接贴代码吧. 1.前台js代码: $.ajax({ async:false,//是否异步 cache:false,//是否使用缓存 type: "POST", data:{fileData:fi

百度编辑器前端二开图片上传Js

百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: 替换原来的 ueditor.all.min.js  原文地址:https://www.cnblogs.com/q1104460935/p/10278629.html

java图片上传(mvc)

最近有开始学起了java,好久没写文章了,好久没来博客园了.最近看了看博客园上次写的图片上传有很多人看,今天在一些篇关于java图片上传的.后台接收用的是mvc.不墨迹了,直接上图. 先看目录结构.idea开发. 一.图片上传还是使用的这款jq插件.前端部署这款插件,不用说了吧.效果图       二.前台代码只需要盖一个位置.因为是比较好用的插件.插件样式自行修改. 三.后台代码. 后面看不见的. 这个图片上传主要是自己写了几个函数.让图片储存更加方便.分成了年月日储存.但是后期遍历比较困难,

Java图片上传

图片上传,其实,也可以按照之前文章--文件上传的方式实现,因为图片也是文件.只要是文件,都可以用流来接收,然后把流给写出到指定的物理空间下,形成我们需要的物理文件. 今天,我们就不用上传文件的方式,这种方式和我之前的一篇制作二维码的文章类似.首先,读文件,需要知道文件的路径,比如放在C盘下面的某个文件.然后把这个图片通过画笔方式给画出来.放到指定服务器路径下.不需要第三方插件,sun公司提供的image工具类就可以实现. 下面我们把桌面上的blue.png图片上传到服务器上. public st

kindeditor图片上传 struts2实现

一.kindeditor以及struts2部署搭建不再赘述,如需要请参考kindeditor使用方法 Struts2框架搭建 二.kindeditor图片上传所依赖jar包在kindeditor\jsp\lib下有 三.以下列出部分核心代码,如需要全部源码可点击下载(待上传) JSP <textarea id="editor_id" name="content" style="width:950px;height:300px;"> 这