FileItem和DiskFileItemFactory处理图片转成base64存入数据库再展示

前提 :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();
		//img and databaseImg
		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("系统错误,请稍后再试!");
		} 
	});
}

在这里插入图片描述

# 代码结束

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章