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">×</span>
</button>
<img alt="头像" id="a_formatImg" src="" />
</div>
<input type="image" id="uploadImg" src="../img/btn_pic.png"><br />
<span class="i-msg">点击添加或者更改图片</span>
<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
}