前端上传图片回显并用base64编码,后端做解码储存,存储图片路径在.properties文件中配置(以上传身份证照片为例)

前端页面:
<form id="kycForm" enctype="multipart/form-data">
<input type="hidden" id="hid" name="idPhotoUrl" value=""/>
<input type="hidden" id="hid2" name="idPhotoUrl2" value=""/>

<div class="first-key">
    <div> <img src="背景图片路径" alt="" style="width: 100%;height: 100%;margin-top:.3rem;"></div>
<img id="img1" class="img" src="上传按钮样式图片路径" alt=" " >
<input type="file" class="file" placeholder="ICCID" id="fil" name="photo1" accept="img/*" capture="camera">
<span style="margin-top: .5rem;z-index: 99">上传身份证正面照</span>

</div>
<div class="first-key">
<div> <img src="背景图片路径" alt="" style="margin-top: .3rem;width: 100%;height: 100%;"></div>
<img id="img2" class="img" src="上传按钮样式图片路径" alt="">
<input type="file" class="file" placeholder="ICCID" id="fil2" name="photo2" accept="img/*" capture="camera">
<span style="margin-top: .5rem">手持身份证反面照</span>
</div>
<div class="btn-center">
<button type="button" id="btn-go" class="btn btn-primary" >提交审核</button>
</div>
</form>
 
<script>
$(".first-key").on("change", "input[name=photo1]", function() {
$(this).prev().css("opacity","1")
var filePath = $(this).val();//读取图片路径
//将图片的URL赋值与hidden标签内
var fr = new FileReader();//创建new FileReader()对象
var imgObj = this.files[0];//获取图片
fr.readAsDataURL(imgObj);//将图片读取为DataURL
var obj = $(this).prev()[0];//
var arr = filePath.split('\\');
var fileName = arr[arr.length - 1];
$("#img1").removeClass("img");
$("#img1").addClass("img2");
$(this).parent().next().show();
fr.onload = function() {
obj.src = this.result;
//将base64编码后的图片赋值到hidden标签内
$("#hid").val(obj.src);
};
});
$(".first-key").on("change", "input[name=photo2]", function() {
$(this).prev().css("opacity","1")
var filePath = $(this).val();//读取图片路径
//将图片的URL赋值与hidden标签内
var fr = new FileReader();//创建new FileReader()对象
var imgObj = this.files[0];//获取图片
fr.readAsDataURL(imgObj);//将图片读取为DataURL
var obj = $(this).prev()[0];//
var arr = filePath.split('\\');
var fileName = arr[arr.length - 1];
$("#img2").removeClass("img");
$("#img2").addClass("img2");
$(this).parent().next().show();
fr.onload = function() {
obj.src = this.result;
//将base64编码后的图片赋值到hidden标签内
$("#hid2").val(obj.src);
};
});
console.log($("#hid2").val());
</script>


后端代码:
//对字节数组字符串进行Base64解码并生成图片
if (idPhotoUrl == null || idPhotoUrl2 == null) { //图像数据为空
success(false);
}
BASE64Decoder decoder = new BASE64Decoder();
byte[] b =new byte[0] ;
if(idPhotoUrl.contains("data:image/png;base64")){
//Base64解码
b=decoder.decodeBuffer(idPhotoUrl.replace("data:image/png;base64,", ""));
}
if(idPhotoUrl.contains("data:image/jpeg;base64")){
//Base64解码
b=decoder.decodeBuffer(idPhotoUrl.replace("data:image/jpeg;base64,", ""));
}
//idPhotoUrl = idPhotoUrl.replace("data:image/jpeg;base64,", "");
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {//调整异常数据
b[i] += 256;
}
}
//生成jpg图片
Properties prop = new Properties();
InputStream ins = this.getClass().getResourceAsStream("/config/photoUrl.properties");
prop.load(ins);
String imgFilePath = prop.getProperty("PHOTOURL") + UUID.randomUUID() + ".jpg";//新生成的图片
OutputStream out = new FileOutputStream(imgFilePath);
out.write(b);
out.flush();
out.close();
user.setIdPhotoUrl(imgFilePath);


byte[] b2 =new byte[0] ;
if(idPhotoUrl2.contains("data:image/png;base64")){
//Base64解码
b2=decoder.decodeBuffer(idPhotoUrl2.replace("data:image/png;base64,", ""));
}
if(idPhotoUrl2.contains("data:image/jpeg;base64")){
//Base64解码
b2=decoder.decodeBuffer(idPhotoUrl2.replace("data:image/jpeg;base64,", ""));
}
//idPhotoUrl = idPhotoUrl.replace("data:image/jpeg;base64,", "");
for (int i = 0; i < b2.length; ++i) {
if (b2[i] < 0) {//调整异常数据
b2[i] += 256;
}
}
//生成jpg图片
String imgFilePath2 = prop.getProperty("PHOTOURL") + UUID.randomUUID() + ".jpg";//新生成的图片
OutputStream out2 = new FileOutputStream(imgFilePath2);
out2.write(b2);
out2.flush();
out2.close();

user.setIdPhotoUrl2(imgFilePath2);


properties文件:
     PHOTOURL=想放的文件夹绝对路径










猜你喜欢

转载自www.cnblogs.com/DLDeep/p/10284183.html
今日推荐