原生js和servlet將圖片存入數據庫和讀取

最近在做公司項目的時候,有個小功能需要將圖片存入數據庫。可能大家覺得奇怪,還有人把圖片存入數據庫。當時我接受這個需求的時候也快瘋了,一般都是隻存圖片路徑的,但是人家這麼要求只能照辦了。當時在網上找了半天,終於得以解決。

其實,數據庫是可以存二進制文件。所以,先獲取圖片的二進制數組,然後直接插入數據庫。當讀的時候,獲得的是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();
				}
		}
	}

}

當然,代碼有不足之處,希望各位大神指教。

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