ajax图片的上传和裁剪springmvc后台接受处理

最新推荐文章于 2021-05-26 03:16:23 发布

风起尘落

最新推荐文章于 2021-05-26 03:16:23 发布

阅读量799

点赞数 1

分类专栏： Javaweb 文章标签： Springmvc 图片的上传的裁剪

本文链接：https://blog.csdn.net/qq_34707456/article/details/78403835

版权

Javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>Title</title>
   

    <!--上传图像-->
    <link rel="stylesheet" href="${base_path}/resources/common/uploadimg/css/amazeui.min.css">
    <link rel="stylesheet" href="${base_path}/resources/common/uploadimg/css/amazeui.cropper.css">
    <link rel="stylesheet" href="${base_path}/resources/common/uploadimg/css/custom_up_img.css">
</head>
<body>
<div class="row cl">
    <label class="form-label col-xs-4 col-sm-2">证件照片：</label>
    <div class="up-img" >
        <img style="width: 150px;height: 150px;" id="up-img-touch" class="am-circle" alt="点击图片上传" src="images/9e56c94193fb40bc95f91eb7c7a0df64.jpeg"
             data-am-popover="{content: '点击上传', trigger: 'hover focus'}">
    </div>
</div>
<div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
    <div class="am-modal-dialog up-frame-parent up-frame-radius">
        <div class="am-modal-hd up-frame-header">
            <label>修改头像</label>
            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
        </div>
        <div class="am-modal-bd  up-frame-body">
            <div class="am-g am-fl">
                <div class="am-form-group am-form-file">
                    <div class="am-fl">
                        <button type="button" class="am-btn am-btn-default am-btn-sm">
                            <i class="am-icon-cloud-upload"></i> 选择要上传的文件
                        </button>
                        <span style="color: red;">&nbsp;&nbsp;&nbsp;&nbsp;请上传图片文件:(jpg,jpeg,png,gif),大小:(0-1MB)</span>
                    </div>
                    <input type="file" id="inputImage">
                </div>
            </div>
            <div class="am-g am-fl">
                <div class="up-pre-before up-frame-radius">
                    <img alt="" src="" id="image">
                </div>
                <div class="up-pre-after up-frame-radius">
                </div>
            </div>
            <div class="am-g am-fl">
                <div class="up-control-btns">
                    <span class="am-icon-rotate-left" οnclick="rotateimgleft()"></span>
                    <span class="am-icon-rotate-right" οnclick="rotateimgright()"></span>
                    <span class="am-icon-check" id="up-btn-ok" url="photoproch.action"></span>//提交给后台处理的url
                </div>
            </div>

        </div>
    </div>

</div>
<!--加载框-->
<div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">正在上传...</div>
        <div class="am-modal-bd">
            <span class="am-icon-spinner am-icon-spin"></span>
        </div>
    </div>
</div>
<input type="text" id="base_path" hidden="" value="${base_path}">
<!--警告框-->
<div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">信息</div>
        <div class="am-modal-bd" id="alert_content">
            成功了
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" id="close" οnclick="closemodel()">确定</span>
        </div>
    </div>
</div>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${base_path }/resources/common/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="${base_path}/resources/common/uploadimg/js/amazeui.min.js" charset="utf-8"></script>
<script src="${base_path}/resources/common/uploadimg/js/cropper.min.js" charset="utf-8"></script>
<script src="${base_path}/resources/js/player/page/custom_up_img.js" charset="utf-8"></script>
</body>

</html>

页面效果：

js处理（custom_up_img.js)：

$(document).ready(function(){
        $("#up-img-touch").click(function(){
              $("#doc-modal-1").modal({width:'600px'});//点击图片时弹出文件选择框
        });
});
$(function() {
    'use strict';
    // 初始化
    var $image = $('#image');
    $image.cropper({
        aspectRatio: '1',
        autoCropArea:0.8,
        preview: '.up-pre-after',
        
    });

    // 事件代理绑定事件
    $('.docs-buttons').on('click', '[data-method]', function() {
   
        var $this = $(this);
        var data = $this.data();
        var result = $image.cropper(data.method, data.option, data.secondOption);
        switch (data.method) {
            case 'getCroppedCanvas':
            if (result) {
                // 显示 Modal
                $('#cropped-modal').modal().find('.am-modal-bd').html(result);
                $('#download').attr('href', result.toDataURL('image/jpeg'));
            }
            break;
        }
    });
    

    // 上传图片
    var $inputImage = $('#inputImage');
    var URL = window.URL || window.webkitURL;
    var blobURL;

    if (URL) {
        $inputImage.change(function () {
            var files = this.files;
            var file;

            if (files && files.length) {
               file = files[0];

               if (/^image\/\w+$/.test(file.type)) {
                    blobURL = URL.createObjectURL(file);
                    $image.one('built.cropper', function () {
                        // Revoke when load complete
                       URL.revokeObjectURL(blobURL);
                    }).cropper('reset').cropper('replace', blobURL);
                    $inputImage.val('');
                } else {
                   layer.msg("请选择一个图片文件",{icon: 0});
                }
            }

            // Amazi UI 上传文件显示代码
            var fileNames = '';
            $.each(this.files, function() {
                fileNames += '<span class="am-badge">' + this.name + '</span> ';
            });
            $('#file-list').html(fileNames);
        });
    } else {
        $inputImage.prop('disabled', true).parent().addClass('disabled');
    }
    
    //绑定上传事件
    $('#up-btn-ok').on('click',function(){
       var $modal = $('#my-modal-loading');
       var $modal_alert = $('#my-alert');
       var img_src=$image.attr("src");
       if(img_src==""){
          set_alert_info("没有选择上传的图片");
          $modal_alert.modal();
          return false;
       }
       
       $modal.modal();
       var url=$(this).attr("url");
       var canvas=$("#image").cropper('getCroppedCanvas');
       var data=canvas.toDataURL("image/jpeg",0.7); //转成base64
       var imgs = data.substring(23);
        $.ajax( {  
                url:url,
                type: "POST",  
                data: {"image":imgs},
                success: function(data, textStatus){
                   $modal.modal('close');
                   $modal_alert.modal();
                   if(data=="ok"){    
                       set_alert_info("上传成功");

                      $("#up-img-touch img").attr("src",data.file); 
                      var img_name=data.file.split('/')[2];
                      $("#pic").text(img_name);
                   }
                },
                error: function(){
                   $modal.modal('close');
                   set_alert_info("上传文件失败了！");
                   $modal_alert.modal();
                   //console.log('Upload error');  
                }  
         });  
       
    });
    
});

function rotateimgright() {
$("#image").cropper('rotate', 90);
}


function rotateimgleft() {
$("#image").cropper('rotate', -90);
}

function set_alert_info(content){
   $("#alert_content").html(content);
}
function closemodel(){
    $("#doc-modal-1").modal('close');
}

其他的css,js文件

（文件无法上传）文件名在jsp页面里有(jquery这些自己引入,JSP里其他的jss和css可以在网上下载）

custom_up_img.css

.up-frame-bj .up-frame-radius{padding-bottom: 20px;border-radius: 5px;}
.up-frame-parent .up-frame-header{height: 50px;padding: 0px;line-height: 50px;border-bottom:solid 1px #e5e5e5;}
.up-frame-parent .up-frame-header label{font-size: 16px;float: left;margin-left: 14px;color: #808080;}

.up-frame-parent .up-frame-body{padding:20px;}
.up-frame-parent .up-pre-before {width:327px;height: 327px;padding:0px;float: left;background: #fcfcfc;border: 1px solid #e3e3e3;}
.up-frame-parent .up-pre-before img{width: 100%;}

.up-frame-parent .up-frame-body .up-pre-after{background: #fcfcfc;overflow: hidden;width: 186px;height: 186px;border: 1px solid #e3e3e3;float: left;margin-left: 25px;}

.up-frame-parent .up-control-btns{width: 150px;height:30px;margin-left: auto;margin-right: auto;background: #dddddd;text-align: center;line-height: 30px; margin-top: 30px;}
.up-frame-parent .up-control-btns span{width: 30%;} 

@media screen and (max-width: 1024px){
   .up-frame-parent .up-pre-before {width: 100%;}
   .up-frame-parent .up-frame-body .up-pre-after{margin-left: 0px;margin-top: 10px;}
}
后台处理
RequestMapping("photoproch")
    @ResponseBody
    public  String Photoproch(String image, HttpServletRequest request){
        String pathRoot = request.getSession().getServletContext().getRealPath("");
        String tempPath=pathRoot+"images/"+"player.jpg";
        File file = base64ToFile(tempPath.toString(), image);//将图片存在webapp下的images文件夹，可以自己更改图片的储存位置
        return "ok"; //前台需要更换图片的话，要把图片的路径返回给前台

    }
    public File base64ToFile(String fullPath, String base64) {
        BASE64Decoder decoder = new BASE64Decoder();
        try {
            byte[] b = decoder.decodeBuffer(base64);
            for (int i = 0; i < b.length; i++) {
                if (b[i] < 0) {
                    b[i] += 256;
                }
            }
            OutputStream out = new FileOutputStream(fullPath);
            out.write(b);
            out.flush();
            out.close();
        } catch (Exception e) {
            e.printStackTrace();

        }
        return new File(fullPath);
    }
}