最近在做公司項目的時候,有個小功能需要將圖片存入數據庫。可能大家覺得奇怪,還有人把圖片存入數據庫。當時我接受這個需求的時候也快瘋了,一般都是隻存圖片路徑的,但是人家這麼要求只能照辦了。當時在網上找了半天,終於得以解決。
其實,數據庫是可以存二進制文件。所以,先獲取圖片的二進制數組,然後直接插入數據庫。當讀的時候,獲得的是Blob對象,跟據Blob對象獲得二進制數據,二進制數組都拿到了,那還不是爲所欲爲。
不說了,直接上代碼吧:jar包下載地址https://download.csdn.net/my
一、前段代碼,HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="file" class="fileSelect" style="display: none;" onchange="fileSelected()" />
<button id="btnFileSelect" class="btn" onclick="openFileWindow()">SelectImg</button>
<div id="img" style="background-color: #aaa; height:200px; width:200px;">
</div>
<button id="upload" onclick="startUpload()">開始上傳</button>
<!--
作者:offline
時間:2018-08-05
描述:從數據庫獨處的圖片
-->
<button onclick="getImg()">顯示圖片</button>
<div style="background-color: #ccc; height:200px; width:200px;">
<img id="showImg" src="" alt="" />
</div>
</body>
js部分
<script>
//模擬單擊事件
function openFileWindow()
{
document.getElementsByClassName("fileSelect")[0].click();
}
//選擇圖片時觸發
var file;
function fileSelected()
{
//獲取dom元素
var fileButton = document.getElementsByClassName("fileSelect")[0];
//讀取圖片
var fileReader = new FileReader();
//註冊加載完整後的事件
fileReader.onload = function(e){
//獲得img的dom元素
var img = document.getElementById("pic");
//獲取圖片的base64的編碼
var imgUrl = e.target.result;
//將轉碼後的圖片放到頁面
// var html = "<img src='" + imgUrl + "'/>";
// document.getElementById("img").innerHTML = html;
var pic = document.createElement("img");
pic.src = imgUrl;
//獲取父元素
var pran = document.getElementById("img");
pran.appendChild(pic);
}
//獲取圖片
file = fileButton.files[0];
fileReader.readAsDataURL(file);
}
function startUpload()
{
//上傳的url
var url = "servlet/ImgUploadServlet";
//手工構造一個form表單
var formData = new FormData();
//向表單添加數據,用這個表單發送數據
formData.append("file" , file);
//設置progress,onload,error,abort
var request = new XMLHttpRequest();
request.upload.addEventListener("progress" , window.evt_upload_progress , false);
request.addEventListener("load" , window.evt_upload_complete , false);
request.addEventListener("error" , window.evt_upload_failed , false)
request.addEventListener("abort" , window.evt_upload_cancel , false);
request.open("POST" , url);
request.send(formData);
}
window.evt_upload_progress = function(evt)
{
if(evt.lengthComputable)
{
var progress = Math.round(evt.loaded * 100 / evt.total);
console.log("上傳進度" + progress);
}
};
window.evt_upload_complete = function (evt)
{
if(evt.loaded == 0)
{
console.log ("上傳失敗!");
}
else
{
console.log ("上傳完成!");
//var response = JSON.parse(evt.target.responseText);
console.log (evt.target.responseText);
}
};
window.evt_upload_failed = function (evt)
{
console.log ("上傳出錯");
};
window.evt_upload_cancel = function (evt)
{
console.log( "上傳中止!");
};
function getImg()
{
var e = document.getElementById("showImg");
e.src = "servlet/GetImgServlet";//servlet的路徑
}
</script>
二、後端代碼(存入部分)
package my.imgUpload.demo;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import oracle.sql.BLOB;
import org.apache.commons.fileupload.FileItemIterator;
import org.apache.commons.fileupload.FileItemStream;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.fileupload.util.Streams;
public class ImgUploadServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request , response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
doUpload(request , response);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doUpload(HttpServletRequest request,
HttpServletResponse response) throws Exception {
String result = null;
boolean isMultiPart = ServletFileUpload.isMultipartContent(request);
if(!isMultiPart)
throw new Exception("請求編碼必須爲: multipart/form-data !");
request.setCharacterEncoding("utf-8");
ServletFileUpload upload = new ServletFileUpload();
FileItemIterator it = upload.getItemIterator(request);
while(it.hasNext())
{
//表單域
FileItemStream item = it.next();
String fileName = item.getFieldName();
InputStream fieldStream = item.openStream();
//普通的表單域則直接讀取
if(item.isFormField())
{
String fieldValue = Streams.asString(fieldStream , "utf-8");
System.out.println("表單域:" + fileName + "=" + fieldValue);
}
else
{
System.out.println("上傳的文件名爲:" + item.getName());
result = item.getName();
//建立緩衝
ByteArrayOutputStream cache = new ByteArrayOutputStream();
byte[] b = new byte[1024];
//讀取數據
while(true)
{
int n = fieldStream.read(b);
if(n == 0)
continue;
if(n<0)
break;
cache.write(b, 0, n);
}
byte[] byts = cache.toByteArray();
saveImg(byts);
OutputStream out = response.getOutputStream();
out.write(result.getBytes());
out.close();
}
}
}
//鏈接數據庫將圖片存進數據庫
public void saveImg(byte[] bytes)
{
Connection conn = null;
PreparedStatement ps = null;
try {
//加載驅動
Class.forName("oracle.jdbc.OracleDriver");
//鏈接數據庫
conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl", "scott", "tiger");
System.out.println("鏈接成功!");
//編寫sql
String sql = "INSERT INTO PERSON (name , img) VALUES (?,?)";
//裝在sql
ps = conn.prepareStatement(sql);
//給問號賦值
ps.setString(1, "唐馬儒23");
ps.setBytes(2, bytes);
int row = ps.executeUpdate();
System.out.println("成功插入:"+row);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
if(ps!=null)
{
try {
ps.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
if(conn!=null)
{
try {
conn.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
}
(讀取部分)
package my.imgUpload.demo;
import java.io.IOException;
import java.io.OutputStream;
import java.io.PrintWriter;
import java.sql.Blob;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class GetImgServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doPost(request , response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
getImg(request , response);
}
public void getImg(HttpServletRequest request, HttpServletResponse response)
{
Connection conn = null;
PreparedStatement ps = null;
OutputStream out = null;
ResultSet rs = null;
try {
Class.forName("oracle.jdbc.OracleDriver");
conn = DriverManager.getConnection("jdbc:oracle:thin:@127.0.0.1:1521:orcl" , "scott" , "tiger");
//構造sql
String sql = "select name , img from person";
//裝在sql
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
//處理結果集
rs.next();
Blob blob = rs.getBlob("img");
byte[] bytes = blob.getBytes(1, (int)blob.length());
//獲取輸出流
out = response.getOutputStream();
out.write(bytes);
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}finally{
try {
if(out!=null)
out.close();
if(rs!=null)
rs.close();
if(ps!=null)
ps.close();
if(conn!=null)
conn.close();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
}
當然,代碼有不足之處,希望各位大神指教。