MultipartFile上传图片

作者：LoveEmperor-王子様
HTML：
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
<title>实名认证</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" th:href="@{/css/common/ionic.css}" />
<link th:href="@{/css/common/mainstyle.css}" rel="stylesheet"/>
<link th:href="@{/css/common/common.css}" rel="stylesheet"/>
<script th:src="@{/js/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jq_validate.js}"></script>
<script th:src="@{/js/vue/vue.min.js}"></script>
<script th:src="@{/js/vue/vue-resource.min.js}"></script>
</head>
<body>
<div class="bar bar-header bar-dark" style="line-height: 30px">
<h1 class="title">
实名认证
</h1>
</div>
<div class="bar bar-subheader bar-dark" style="height: 100px;width: 100%;text-align: center">
<div class="step">
<div class="row row-center font-12">
<div class="col">
<span class="green_step">1</span>
<i class="float-r green_step"></i>
</div>
<div class="col">
<i class="float-l green_step"></i>
<span class="green_step">2</span>
<i class="float-r green_step"></i>
</div>
<div class="col">
<i class="float-l green_step"></i>
<span class="green_stepplus">
<span class="green_step">3</span>
</span>
<i class="float-r"></i>
</div>
<div class="col">
<i class="float-l"></i>
<span>4</span>
</div>
</div>
<div class="row row-center font-12">
<div class="col bule">
填写资料
</div>
<div class="col bule">
押金交纳
</div>
<div class="col bule">
实名认证
</div>
<div class="col">
扫码激活
</div>
</div>
</div>
</div>
<div class="list">
<div id="authendiv" v-show="authenshow" class="list" style="margin-top: 150px;width: 100%">
<form id="uploadForm" enctype="multipart/form-data" method="POST" action="../identification/certification.fgl">
<div class="picbox bg-white">
<div class="row ">
<div class="col img-row">
<img alt="" v-bind:src="frontimg" width="100%" class="has_img"
style="z-index: 100;top: 1rem"/>
<input type="file" name="mIdCard" id="frontimgInput" v-on:change="onFileChangefront"
accept="image/*"
style="top: 3.2rem;left: 3.4rem;width: 30%;z-index: 1;position: absolute;opacity: 0;border: none;cursor: pointer;"/>
</div>
<div class="col img-row">
<img alt="" v-bind:src="frontimg2" width="100%" class="has_img" style="z-index: 100;top: 1rem"/>
</div>
</div>
<div class="row text-row" style="font-size: 15px">
<div class="col">身份证正面照</div>
<div class="col">实例图</div>
</div>
<div class="row " >
<div class="col img-row">
<img v-bind:src="backimg" alt="" width="100%" class="has_img" style="z-index: 100"/>
<input type="file" name="mVehicleLicence" id="backimgInput" accept="image/*"
v-on:change="onFileChangeback"
style="z-index: 1;cursor: pointer;top: 13.8rem;left: 3.4rem;position: absolute;width: 30%;border: none;opacity: 0;cursor: pointer;"/>
</div>
<div class="col img-row">
<img alt="" v-bind:src="backimg2" width="100%" class="has_img" style="z-index: 100"/>
</div>
</div>
<input type="hidden" v-model="plateNumber" name="plateNumber"/>
<div class="row text-row" style="font-size: 15px">
<div class="col" style="font-size: 15px">行驶证正面</div>
<div class="col" style="font-size: 15px">实例图</div>
</div>
</div>
<div style="margin-top: 5px;margin-right: 20px;margin-left: 20px">
<input class="button button-block button-positive" type="button" value="提交审核" v-on:click="surebtn()"/>
<p style="margin-top: 10px;color: #A8A8A8;font-size: 13px">证件上文字清晰可识别，支持JPG,PNG格式</p>
</div>
</form>
</div>
</div>
</body>
<script th:inline="javascript">
var valid = new ValidateFn();
var authendiv = new Vue({
el: "#authendiv",
data: {
authenshow: true,
frontimg: '../img/common/idcard1.png',
frontimg2: '../img/common/idcard2.jpg',
backimg: '../img/common/driving1.png',
backimg2: '../img/common/driving2.jpg',
plateNumber: window.localStorage.getItem("plateNumber")
},
methods: {
onFileChangefront(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImagefront(files);
},
createImagefront(file) {
if (typeof FileReader === 'undefined') {
return false;
}
var image = new Image();
var vm = this;
var leng = file.length;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function (e) {
vm.frontimg = ((e.target.result));
};
},
onFileChangeback(e) {
var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImageback(files);
},
createImageback(file) {
if (typeof FileReader === 'undefined') {
return false;
}
var image = new Image();
var vm = this;
var leng = file.length;
var reader = new FileReader();
reader.readAsDataURL(file[0]);
reader.onload = function (e) {
vm.backimg = ((e.target.result));
};
},
surebtn: function () {
if ($("#frontimgInput").val() == null || $("#frontimgInput").val() == 0){
valid.messageShowFn("请选择身份证正面照",30);
return false;
}
if ($("#backimgInput").val() == null || $("#backimgInput").val() == 0){
valid.messageShowFn("请选择行驶证正面照",30);
return false;
}
$("#uploadForm").submit();
}
}
})
var inreview = new Vue({
el: "#inreview",
data: {
inreviewshow: true
}
})
if([[${warning}]] !=null){
valid.messageShowFn([[${warning}]],15);
}
</script>
</html>
java：
/**
* 实名认证
* @param name
* @param model
* @return
* @throws Exception
*/
@RequestMapping(value = "/identification/certification.fgl", method = RequestMethod.POST)
public String handleFileUpload(@RequestParam("mVehicleLicence") MultipartFile mVehicleLicence,
@RequestParam("mIdCard") MultipartFile mIdCard, @RequestParam("plateNumber") String plateNumber,
Model model) throws Exception {
File idCard = File.createTempFile(String.format("id_%s_%s-1.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");// new File(String.format("id_%s_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")));
File vehicleLicence = File.createTempFile(String.format("lic_%s_%s-1.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");//new File(String.format("lic_%s_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")));
if (mVehicleLicence == null || mIdCard == null) {
model.addAttribute("warning", "上传文件不能为空");
return "identification";
}
if (mVehicleLicence.getSize() > GetConfig.get().getMaxUploadFile()*1024*1024
|| mIdCard.getSize() > GetConfig.get().getMaxUploadFile()*1024*1024) {
model.addAttribute("warning",
String.format("上传文件不能超过%dM", GetConfig.get().getMaxUploadFile()));
return "identification";
}
// FileUtils.copyInputStreamToFile(mIdCard.getInputStream(), idCard);
// FileUtils.copyInputStreamToFile(mVehicleLicence.getInputStream(), vehicleLicence);
// log.info("idCardFile=" + idCard.getName() + ":" + mIdCard.getSize());
// log.info("vehicleLicense=" + vehicleLicence.getName() + ":" + mVehicleLicence.getSize());
img = ImageIO.read(mIdCard.getInputStream()); // 构造Image对象
width = img.getWidth(null); // 得到源图宽
height = img.getHeight(null); // 得到源图长
BufferedImage image = new BufferedImage(375, 667,BufferedImage.TYPE_INT_RGB );
image.getGraphics().drawImage(img, 0, 0, 375, 667, null); // 绘制缩小后的图
// String fname = idCard.getName().substring(0, idCard.getName().lastIndexOf("."));//新名字
//ImageIO.write(image, "jpg", new File("e:/" + fname + ".jpg"));
File file1 = File.createTempFile(String.format("id_%s_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");
ImageIO.write(image, "jpg", file1);
File idCard2 = new File(file1.getAbsolutePath());
img2 = ImageIO.read(mVehicleLicence.getInputStream()); // 构造Image对象
width2 = img2.getWidth(null); // 得到源图宽
height2 = img2.getHeight(null); // 得到源图长
BufferedImage image2 = new BufferedImage(375, 667,BufferedImage.TYPE_INT_RGB );
image2.getGraphics().drawImage(img2, 0, 0, 375, 667, null); // 绘制缩小后的图
// String fname2 = vehicleLicence.getName().substring(0, vehicleLicence.getName().lastIndexOf("."));//新名字
File file2 = File.createTempFile(String.format("id_%s_%s.jpeg", plateNumber, TimeUtils.getSysTime("yyyyMMddHHmmss")), ".jpeg");
ImageIO.write(image2, "jpg", file2);
File vehicleLicence2 = new File(file2.getAbsolutePath());
CertificationCmdDTO cmd = new CertificationCmdDTO();
cmd.setPlateNumber(plateNumber);
cmd.getFiles().put("idCard", idCard2);
cmd.getFiles().put("vehicleLicense", vehicleLicence2);
AckDto<Object> ackDto = PakringServerCom.certification(cmd);
if (idCard != null)
idCard.deleteOnExit();
if (vehicleLicence != null)
vehicleLicence.deleteOnExit();
if (ackDto != null) {
if (ackDto.getStatus() == 200) {
model.addAttribute("destatus", "up_pic");
return "infoReview";
} else {
if (ackDto.getError_code() == ERROR_FLAG.TOKEN) {
model.addAttribute("warning", "TOKEN超时");
} else if (ackDto.getError_code() == ERROR_FLAG.UNKNOW_RECORD) {
model.addAttribute("warning", "未知记录");
} else if (ackDto.getError_code() == ERROR_FLAG.PAY) {
model.addAttribute("warning", "支付押金金额不足");
} else if (ackDto.getError_code() == ERROR_FLAG.WITHOUT_PAY) {
model.addAttribute("warning", "请先付费");
} else {
model.addAttribute("warning", "未知错误1");
}
// return "redirect:/purchase/identification.fgl";
return "identification";
}
} else {
model.addAttribute("warning", "未知错误");
}
return "identification";
}

MultipartFile上传图片相关推荐

springMVC MultipartFile 上传图片时修改图片大小
1.引言服务器配置比较低,打开网站时加载1MB+的图片速度很慢,影响客户体验.所以从网上找了java修改图片大小的方法,这里记录一下以备以后不时之需.我这里设置的是宽240,,高135 按照16 ...
java实现给MultipartFile添加水印
接到一个新需求,上传图片后添加水印先测试本地图片加水印 import javax.imageio.ImageIO; import java.awt.*; import java.awt.image. ...
java上传图片工具类
package com.findmiThree.utils.uploadimg;import java.io.File; import java.text.SimpleDateFormat; impo ...
文件上传MultipartFile实现图片压缩
MultipartFile上传图片并压缩背景之前写过一个图片上传,使用了spring的MultipartFile实现的,比较简单,限制了1M的大小,后来产品需求上传图片需压缩,遂着手开始实现压缩 ...
springmvc结合base64存取图片到mysql
简单介绍: 1.jsp通过MultipartFile上传图片到后台 2.后台把上传的图片通过base64转换成字符串存到mysql 3.从mysql读取图片字符串,通过base64反转成byte数组, ...
ajax传图片以及后台接收,Ajax上传图片，后台使用SpringBoot的MultipartFile类型接收的问题...
Ajax很好用,但是在上传文件这边却总是会出问题.例如,现在想上传一张图片,希望前台无刷新操作,使用Ajax上传,后台接收不到相应的类型,导致上传失败,但是如果使用input和submit组合又会出现 ...
Java 上传图片MultipartFile
控制层 @ApiOperation("封面单图片上传")@RequestMapping(value = "/uplodadImg", method = {Req ...
SpringBoot+WangEditor上传图片
今天本地在调试一个问题,,wangEditor这个富文本编辑器上传图片,其实上传图片到也没有什么困难的地方,关键是在于,后台是SpringBoot来进行接收图片,,不说了直接上代码:这个是前端的代码: ...
java读取服务器图片大小,SpringMVC中MultipartFile上传获取图片的宽度和高度详解
SpringMVC一般使用MultipartFile来做文件的上传,通过MultipartFile的getContentType()方法判定文件的类型(MIME) ".doc":& ...

MultipartFile上传图片

MultipartFile上传图片相关推荐

最新文章

热门文章