您的位置：首页 > 运维架构

最近使用cropper做了一个图片上传功能但是后台各种报错求大佬解决

2018-01-16 16:43 429 查看
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"%>

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/cropper/cropper.min.css">

<link rel="stylesheet"
href="${pageContext.request.contextPath}/resources/cropper/bootstrap.min.css">

<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/plugins/jquery.min.js"></script>

<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/cropper/cropper.js"></script>

<script type="text/javascript"
src="${pageContext.request.contextPath}/resources/cropper/bootstrap.min.js"></script>

<style type="text/css">

body {
text-align: center;

}

#user-photo {
width: 300px;
height: 300px;
margin-top: 10px;

}

#photo {
max-width: 100%;
max-height: 350px;

}

.img-preview-box {
text-align: center;

}

.img-preview-box>div {
display: inline-block;;
margin-right: 10px;

}

.img-preview {
overflow: hidden;

}

.img-preview-box .img-preview-lg {
width: 150px;
height: 150px;

}

.img-preview-box .img-preview-md {
width: 100px;
height: 100px;

}

.img-preview-box .img-preview-sm {
width: 50px;
height: 50px;
border-radius: 50%;

}

</style>

<script type="text/javascript">

var initCropperInModal = function(img, input, modal) {
var $image = img;
var $inputImage = input;
var $modal = modal;
var options = {
aspectRatio : 1, // 纵横比
viewMode : 2,
preview : '.img-preview' // 预览图的class名
};
// 模态框隐藏后需要保存的数据对象
var saveData = {};
var URL = window.URL || window.webkitURL;
var blobURL;
$modal.on('show.bs.modal', function() {
// 如果打开模态框时没有选择文件就点击“打开图片”按钮
if (!$inputImage.val()) {
$inputImage.click();
}
}).on('shown.bs.modal', function() {
// 重新创建
$image.cropper($.extend(options, {
ready : function() {
// 当剪切界面就绪后，恢复数据
if (saveData.canvasData) {
$image.cropper('setCanvasData', saveData.canvasData);
$image.cropper('setCropBoxData', saveData.cropBoxData);
}
}
}));
}).on('hidden.bs.modal', function() {
// 保存相关数据
saveData.cropBoxData = $image.cropper('getCropBoxData');
saveData.canvasData = $image.cropper('getCanvasData');
// 销毁并将图片保存在img标签
$image.cropper('destroy').attr('src', blobURL);
});
if (URL) {
$inputImage.change(function() {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {

if (blobURL) {
URL.revokeObjectURL(blobURL);
}
blobURL = URL.createObjectURL(file);

// 重置cropper，将图像替换
$image.cropper('reset').cropper('replace', blobURL);

// 选择文件后，显示和隐藏相关内容
$('.img-container').removeClass('hidden');
$('.img-preview-box').removeClass('hidden');
$('#changeModal .disabled').removeAttr('disabled')
.removeClass('disabled');
$('#changeModal .tip-info').addClass('hidden');

} else {
window.alert('请选择一个图像文件！');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}

var sendPhoto = function() {
// 得到PNG格式的dataURL
var photo = $('#photo').cropper('getCroppedCanvas', {
width : 300,
height : 300
}).toDataURL('image/png');
$
.ajax({
url : '${pageContext.request.contextPath}/admin/logo/editBannerPhotoPath', // 要上传的地址
type : 'post',
data : {
'imgData' : photo
},
dataType : 'json',
success : function(data) {
if (data.status == 0) {
// 将上传的头像的地址填入，为保证不载入缓存加个随机数
$('.user-photo')
.attr(
'src',
'${pageContext.request.contextPath}/admin/logo/loadImage_banner?id=${logo.id}?t='
+ Math.random());
$('#changeModal').modal('hide');
} else {
alert(data.info);
}
}
});
$(function() {
initCropperInModal($('#photo'), $('#photoInput'), $('#changeModal'));
});

</script>

</head>

<body>
<button class="btn btn-primary" data-target="#changeModal"
data-toggle="modal">打开</button>
<br />
<div class="user-photo-box">
<img id="user-photo"
src="${pageContext.request.contextPath}/admin/logo/loadImage_banner?id=${logo.id}">
</div>
</div>
<div class="modal fade" id="changeModal" tabindex="-1" role="dialog"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title text-primary">
<i class="fa fa-pencil"></i> 更换头像
</h4>
</div>
<form id="form3" method="post" enctype="multipart/form-data">
<div class="modal-body">
<p class="tip-info text-center">未选择图片</p>
<div class="img-container hidden">
<img src="" alt="" id="photo">
</div>
<div class="modal-footer">
<label for="photoInput"> <input type="file"
id="photoInput" accept="image/*">
</label>

<button class="btn btn-primary disabled" disabled="true"
onclick="getCroppedCanvas();">提交</button>
<button class="btn btn-close" aria-hidden="true"
data-dismiss="modal">取消</button>
</div>
</form>
</div>
</div>
</div>

</body>

</html>

后台controller

package cn.com.infcn.cadal.controller.admin;

import java.awt.image.BufferedImage;

import java.io.ByteArrayInputStream;

import java.io.File;

import java.io.FileNotFoundException;

import java.io.FileOutputStream;

import java.io.IOException;

import java.util.Base64;

import java.util.Map;

import javax.imageio.ImageIO;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.hibernate.metamodel.relational.Database;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.ResponseBody;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.multipart.MultipartHttpServletRequest;

import cn.com.infcn.ade.core.model.JsonResult;

import cn.com.infcn.cadal.service.LogoService;

import cn.com.infcn.core.pageModel.Logo;

import cn.com.infcn.core.util.FileUtil;

import cn.com.infcn.core.util.ResourceUtil;

import cn.com.infcn.pdd.common.PddFileUtil;

import sun.misc.BASE64Decoder;

@Controller

@RequestMapping("/admin/cropper")

public class CropperController {

    @Autowired

    private LogoService logoservice;  

        @RequestMapping(value ="/savaChange",method = RequestMethod.POST)

        @ResponseBody

       public JsonResult savaChange(HttpServletRequest request, HttpServletResponse response) throws IOException {

            JsonResult j = new JsonResult();

            MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

            Map<String, MultipartFile> fileMap = multipartRequest.getFileMap();

            String fileUploadPath = ResourceUtil.getMessageByConfig("fileUploadPath");

            String logoPath = ResourceUtil.getMessageByConfig("logoPath");

            String savePath = fileUploadPath + System.getProperty("file.separator") + logoPath;

            String filePath = "";

            for (Map.Entry<String, MultipartFile> entity : fileMap.entrySet()) {

                // 上传文件

                MultipartFile file = entity.getValue();

                filePath = FileUtil.uploadFile(request, file, savePath);

            }

            Logo l = logoservice.editBannerPhotoPath(filePath.substring(filePath.lastIndexOf("/")+1));

            j.setSuccess(true);

            j.setMsg("保存成功！");

            j.setObj(l);

            return j;

            /*

             String base64 = dataURL.substring(dataURL.indexOf(",") + 1);

        FileOutputStream write = new FileOutputStream(new File(filePath + imgName));

        byte[] decoderBytes = Base64.getDecoder().decode(base64);

        write.write(decoderBytes);

        write.close();

       

        */

  

}

}

虽然网上各种cropper的讲解 教程但是由于本人新手各种进坑，如有大佬能够解决 请联系QQ3102481616不胜感激
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  cropper
相关文章推荐
新的分享
章节导航