cropper配合ajaxupload实现图片截图与上传并上传至远程服务器地址详解编程语言

cropper配合ajaxupload实现图片截图与上传并上传至远程服务器地址

1、插件引用

    <!– 上传图片css –>

    <link rel=”stylesheet” href=”../css/common/cropper.min.css” />

    <!– 图片上传插件 –>

    <script src=”../js/common/ajaxupload.js” type=”text/javascript”></script>

    <!– 截图插件cropper –>

    <script src=”../js/common/cropper.min.js” type=”text/javascript”></script>

2、html代码

 <!-- 图片剪裁工具  --> 
    <div class="a-img"> 
        <div id="show_FormatImg" style="width: 400px; height:200px;display: none;"> 
            <button type="button" class="close" id="btn_delFormatImg" aria-label="Close"> 
                <span aria-hidden="true">× 
            </button> 
            <img alt="头像" id="a_formatImg" src="" /> 
        </div> 
        <input type="image" id="uploadImg" src="../img/btn_pic.png"><br /> 
        <span class="i-msg">点击添加或者更改图片 
        <div id="upload_img" class="row" style="display: none;"> 
            <div class="col-sm-12"> 
                <div style="width: 400px; height: 200px; margin: 0 auto;"> 
                    <img id="image_upload" class="img-responsive" src="###" /> 
                </div> 
                <div style="margin-top: 15px;"> 
                    <button id="btn_uploadImg" type="button" class="btn btn-primary" style="background-color: #686897; color: #FFFFFF;">确定</button> 
                    <button id="btn_cancel" type="button" class="btn btn-primary" style="background-color: #686897; color: #FFFFFF;">取消</button> 
                </div> 
            </div> 
        </div> 
    </div>

3、js代码:

    初始化变量:

    /**

     * 默认参数

     */

    defaultOption: {

        img:””,      //新增图片名称

        flag_uploadImg:true,// 防止重复上传图片

    }

    第一步:图片上传与回显:

    /** 
     * 上传图片 
     * @returns 
     */ 
    uploadimg:function(){ 
        var index; 
        var button = $('#uploadImg'); 
        new AjaxUpload(button,{ 
            action: '../upload/uploadImg.do', 
             name: 'img', 
             onSubmit : function(file, ext){ 
                    if (ext && /^(jpg|JPG|jpeg|JPEG|png|PNG|gif|bmp)$/.test(ext)){ 
                        // 开启加载层 
                        index = layer.load(2, { 
                            shade: [0.1,'#fff'] //0.1透明度的白色背景 
                        }); 
                        return true; 
                    } else { 
                        layer.msg('非图片类型文件,请重传!'); 
                        return false; 
                    } 
            }, 
            onComplete: function(file, result){ //上传完毕后的操作 
                layer.close(index);         // 关闭加载层 
                $('#uploadImg').hide(); 
                $('.i-msg').hide(); 
                var imgurl = '../upload/'+result; 
                $('#image_upload').attr('src',imgurl); 
                $('#upload_img').show(); 
                banner.initCropper(); 
                 
            } 
        }); 
    },

    第二步:剪裁插件cropper初始化:

    /** 
     * 剪裁图片初始化 
     */ 
    initCropper:function(){ 
        var banner_group=banner.defaultOption.banner_group; 
        var source_type=banner.defaultOption.source_type; 
        if(banner_group==0||source_type==2){ 
            // 初始化上传图片 
            $('#image_upload').cropper({ 
                aspectRatio : 4.2 / 1, 
                autoCropArea : 1, 
                movable : false, 
                zoomable : false, 
                rotatable : false, 
                scalable : false 
            }); 
        }else if(source_type==0||source_type==1||source_type==3||source_type==4){ 
            // 初始化上传图片 
            $('#image_upload').cropper({ 
                aspectRatio : 2.17 / 1, 
                autoCropArea : 1, 
                movable : false, 
                zoomable : false, 
                rotatable : false, 
                scalable : false 
            }); 
        }else{ 
            layer.alert("请先选择轮播图需要配置的页面") 
            $('#a_formatImg').attr("src",''); 
            $('#a_formatImg').attr("url",''); 
            $('#show_FormatImg').hide(); 
            $('#upload_img').hide(); 
            $('#uploadImg').show(); 
            $('.i-msg').show(); 
        } 
         
    }

     第三步:对剪裁后的图片再进行base64格式的文件上传、

   // 上传图片确认按钮 
    $('#btn_uploadImg').click(function(){ 
        // 开启加载层 
        var index = layer.load(2, { 
            shade: [0.1,'#fff'] //0.1透明度的白色背景 
        }); 
        if(banner.defaultOption.flag_uploadImg){ 
            banner.defaultOption.flag_uploadImg = false;// 防止重复保存图片 
            $('#upload_img').hide(); 
            //获取剪裁区域的图像src并转为base64 
            var dataurl = $('#image_upload').cropper("getCroppedCanvas","").toDataURL('image/png'); 
            $('#image_upload').cropper("destroy");//清空图片 
            var map = new Object(); 
            map.img = dataurl; 
            commonAjax.ajaxSubmit("banner/upPic.do",map,function(result) { 
                if(result.resCode==0){ 
                    banner.defaultOption.flag_uploadImg = true; 
                    layer.close(index);         // 关闭加载层 
                    if (result.resCode==0) { 
                        var data = result.resData; 
                        banner.defaultOption.img=data; 
                        var imgurl = commonAjax.defaultOption.imgurl+commonAjax.defaultOption.sp_banner_img+data; 
                        $('#upload_img').hide(); 
                        $('#a_formatImg').attr('src',imgurl); 
                        $('#a_formatIm  g').attr('url',data); 
                        $('#show_FormatImg').show(); 
                    }else{ 
                        if(result.errCode == "1002"){ 
                            if(window.top==window.self){//不存在父页面 
                                 window.location.href = "login.html"; 
                             }else{ 
                                 parent.gotoLoginHtml(); 
                             } 
                        }else{ 
                            layer.msg('发生未知错误,我们正在努力解决中!'); 
                        } 
                    } 
                }else{ 
                    layer.msg("获取数据失败") 
                } 
                 
            }); 
        } 
    });

4、后台代码块

    (一)第一次图片上传与回显代码

    @RequestMapping("/uploadImg") 
    public String uploadImg(HttpSession session,@RequestParam("img") CommonsMultipartFile mFile){ 
         
        log.info(GlobalContract.LOG_BEGIN); 
        String result = ""; 
        try { 
            // 从session获取登入者信息 
            UserRVO user = (UserRVO) session.getAttribute("sysuser"); 
            if(user != null){ 
                // 1.图片保存到本地 
                String fileName = mFile.getFileItem().getName(); 
                // 图片后缀 
                String suffix = fileName.substring(fileName.lastIndexOf(".")); 
                // 修改后的文件名 
                fileName =String.valueOf("s"+String.valueOf(System.currentTimeMillis()).concat(suffix.toLowerCase())); 
                // 图片路径 
                String filePath = session.getServletContext().getRealPath("/upload/"); 
                File dir = new File(filePath); 
                if (!dir.exists()) { 
                    dir.mkdirs(); 
                } 
                File file = new File(filePath.concat(File.separator).concat(fileName)); 
                mFile.getFileItem().write(file); 
                 
                result = fileName; 
            }else{ 
                result = JSONObject.fromObject(new ResultVO("1002")).toString(); 
            } 
             
             
        } catch (Exception e) { 
            result = GlobalContract.ERROR_RESULT; 
            log.error(e.getMessage()); 
            e.printStackTrace(); 
        } 
         
        log.info(GlobalContract.LOG_END); 
        return result; 
    }

    (二)文件截取后第二次上传并上传至远程服务器

    @RequestMapping("/upPic") 
    public String upPic(HttpSession session, 
            @RequestBody Map<String, String> map){ 
         
        log.info(GlobalContract.LOG_BEGIN); 
        ResultVO resultVO = null; 
         
        if (SessionUtil.isOnSession(session)) { 
            // 处理照片 
            String img_base64 = map.get("img");                // 获取图片base64 
            // 图片保存路径 
            String filePath = "d://IMGNFS/ejyshop_temp/".concat("/sp_banner_img/"); 
            File dir = new File(filePath); 
            if (!dir.exists()) { 
                dir.mkdirs(); 
            } 
            String fileFormat = ".".concat(img_base64.substring(11, img_base64.indexOf(";"))); 
            String fileData = img_base64.substring(img_base64.indexOf(",")+1); 
            String fileName = "s"+String.valueOf(System.currentTimeMillis()).concat(fileFormat); 
            try { 
                // 保存文件到本地 
                Base64Util.decodeFile(fileData, filePath.concat(fileName)); 
                 
                // 2.上传图片到服务器 
                List<String> list = new ArrayList<String>(1); 
                list.add(filePath.concat(fileName)); 
                 
                String result_file = ""; 
                result_file = HttpClientUtil.postFile(list, "/sp_banner_img/"); 
                 
                if(result_file != null && !result_file.isEmpty()) { 
                    // 返回图片名 
                    resultVO = new ResultVO(); 
                    resultVO.setResData(fileName); 
                }else{ 
                    resultVO = new ResultVO("1001"); 
                } 
            } catch (Exception e) { 
                 
                e.printStackTrace(); 
            } 
             
        }else{ 
            resultVO = new ResultVO("1002"); 
        } 
         
        log.info(GlobalContract.LOG_END); 
        return JSONObject.fromObject(resultVO).toString(); 
    }

    (三)工具类

        1、Base64Util.decodeFile文件上传方法

            /** 
             * 对文件进行解码 
             * @param oldString 需要解码的字符串 
             * @param filePath  将字符串解码到filepath文件路径 
             * @return  返回解码后得到的文件 
             * @throws Exception 
             */   
            public static void decodeFile(String fileString, String filePath) throws Exception{   
                 
                File file = new File(filePath);   
                 
                if(file.exists()){   
                    file.delete(); 
                } 
                 
                file.createNewFile(); 
                 
                FileOutputStream out = new FileOutputStream(file); 
                byte[] debytes = null; 
                if (fileString != null) { 
                    debytes = new Base64().decode(fileString.getBytes()); 
                } 
                out.write(debytes); 
                out.close(); 
            }

        2、HttpClientUtil.postFile上传至远程服务器方法        

            /** 
             * 上传文件 
             * @param filePathList 文件路径 
             * @param filePath 在文件服务器 保存的文件夹名 例:“/poi_thumbnail/” 
             * @throws ParseException 
             * @throws IOException 
             */ 
            public static String postFile(List<String> filePathList, String filePath) 
                    throws ParseException, IOException { 
 
                String result = ""; 
                 
                CloseableHttpClient httpClient = HttpClients.createDefault(); 
                try { 
 
                    MultipartEntityBuilder build = MultipartEntityBuilder.create(); 
                    build.setMode(HttpMultipartMode.BROWSER_COMPATIBLE); 
                    build.setCharset(CharsetUtils.get("UTF-8")); 
 
                    for (int i = 0; i < filePathList.size(); i++) { 
                        build.addPart("uploadFile" + i, 
                                new FileBody(new File(filePathList.get(i)))); 
                    } 
 
                    build.addPart( 
                            "filePath", 
                            new StringBody(filePath, ContentType.create("text/plain", 
                                    Consts.UTF_8))); 
 
                    // 把一个普通参数和文件上传给下面这个地址 是一个servlet 
                    HttpPost httpPost = new HttpPost("http://121.40.97.206:9010/fileServer-web/fileUpload/upload"); 
                    // 以浏览器兼容模式运行,防止文件名乱码。 
                    HttpEntity reqEntity = build.build(); 
                    httpPost.setEntity(reqEntity); 
 
                    //System.out.println("发起请求的页面地址 " + httpPost.getRequestLine()); 
                    // 发起请求 并返回请求的响应 
                    CloseableHttpResponse response = httpClient.execute(httpPost); 
                    try { 
                        // 打印响应状态 
                        //System.out.println(response.getStatusLine()); 
                        // 获取响应对象 
                        HttpEntity resEntity = response.getEntity(); 
                        if (resEntity != null) { 
                            // 打印响应长度 
                            //System.out.println("Response content length: " 
                            //        + resEntity.getContentLength()); 
                            // 打印响应内容 
                            //System.out.println(EntityUtils.toString(resEntity, 
                            //        Charset.forName("UTF-8"))); 
                            result = EntityUtils.toString(resEntity, 
                                    Charset.forName("UTF-8")); 
                        } 
                        // 销毁 
                        EntityUtils.consume(resEntity); 
                    } finally { 
                        response.close(); 
                    } 
                } finally { 
                    httpClient.close(); 
                } 
                return result; 
            }

        3、代码中间的常量         

           public enum HttpMultipartMode { 
                /** RFC 822, RFC 2045, RFC 2046 compliant */ 
                STRICT, 
                /** browser-compatible mode, i.e. only write Content-Disposition; use content charset */ 
                BROWSER_COMPATIBLE, 
                /** RFC 6532 compliant */ 
                RFC6532 
            }

原创文章,作者:奋斗,如若转载,请注明出处:https://blog.ytso.com/13903.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论