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

来源：互联网发布：淘宝极限词编辑：程序博客网时间：2024/05/19 02:18

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" onclick="rotateimgleft()"></span>                    <span class="am-icon-rotate-right" onclick="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" onclick="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);    }}

阅读全文

1 0