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("系統錯誤,請稍後再試!");
		} 
	});
}

在這裏插入圖片描述

# 代碼結束

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