前提 :javaWeb项目,oracle数据库,前端jsp,jquery,还有jquery插件(能用.dialog - _ -)
代码开始
jsp
<div id="import_div" style="display: none" title="导入" align="center">
<form id="uploadForm" action="/G3S/superviseRegisterFaceAction.do?cmd=importImag" method="post" enctype="multipart/form-data">
<table id="detailTable"
style="margin-left: 150px; line-height: 28px; margin-top: -5px;"
width="50%">
<tr>
<td >请选择照片:<input type="file" size="40" id="img"
name="img" /></td><!--input中图片的id和name属性-->
</tr>
<!-- <tr>
<input type="submit" value="导入" class="btn" οnclick="waitalert()"></input>
</tr> -->
</table>
</form>
</div>
action(spring的control)
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setSizeThreshold(1024 * 1024 * 5/10);
ServletFileUpload upload = new ServletFileUpload(factory);
@SuppressWarnings("unchecked")
List<FileItem> fileItems = upload.parseRequest(httpServletRequest);
String[] elements = {"img"}
Map<String,String> paramMap = new HashMap<String,String>();
for (int i = 0; i< fileItems.size(); i++) {
FileItem item = fileItems.get(i);
String fieldName = item.getFieldName();
if(elements[0].equals(fieldName)){
in = item.getInputStream();
int available = in.available();
byte[] data = new byte[available];
in.read(data);
in.close();
Base64Encoder encoder = new Base64Encoder();
String encode = encoder.encode(data);
paramMap.put(fieldName, encode);
String imageType = item.getContentType();
imageType = imageType.split("/")[1];
String startStrForDatabase = "data:image/" + imageType +";base64," + encode;
paramMap.put("startStrForDatabase", startStrForDatabase);
continue;
}
}
getService().savaToDatabase(paramMap)
数据库保存截图
图片展示js和结果
<div id="imageShow" style="display: none" title="图片展示">
<img src="" alt=""/>
</div>
使用了jq插件能用.dialog这个前台控件,核心还是$("#imageShow img").attr(“src”,data.img)这句。没试过没有.dialog控件普通js的,不过可能不难吧,可以这个当作一个参考;
function showImg(id){
$.ajax({
type : "POST",
url : "/G3S/superviseRegisterFaceAction.do?cmd=showImag",
cache : false,
async : true,
dataType: 'jsonp',
jsonp: 'callback',
data : {
"iD":id
},
success:function(data){
if (data.error != "") {
alert(data.message);
return;
}
$("#imageShow img").attr("src",data.img);
$("#imageShow").dialog({
title:"人脸识别监督采集图片",
autoOpen : false,
height : 'auto',
width : 'auto',
modal : true,
resizable : true,
buttons : {
"返回" : function() {
$(this).dialog("close");
$("#imageShow img").attr("src","");
}
},
});
$("#imageShow").dialog("open");
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert("系统错误,请稍后再试!");
}
});
}
# 代码结束