原生js和servlet將圖片存入資料庫和讀取

阿新 • • 發佈：2019-01-21

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

其實，資料庫是可以存二進位制檔案。所以，先獲取圖片的二進位制陣列，然後直接插入資料庫。當讀的時候，獲得的是Blob物件，跟據Blob物件獲得二進位制資料，二進位制陣列都拿到了，那還不是為所欲為。

一、前段程式碼，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();
				}
		}
	}

}

當然，程式碼有不足之處，希望各位大神指教。

原生js和servlet將圖片存入資料庫和讀取

最近在做公司專案的時候，有個小功能需要將圖片存入資料庫。可能大家覺得奇怪，還有人把圖片存入資料庫。當時我接受這個需求的時候也快瘋了，一般都是隻存圖片路徑的，但是人家這麼要求只能照辦了。當時在網上找了半天，終於得以解決。其實，資料庫是可以存二進位制檔案。所以，先獲取圖片的二

將資料夾下的所有圖片存入資料庫和下載到本地

//已成功將一資料夾下的圖片檔案（有特定標號）存入資料庫 import java.sql.*; import java.io.*; public class Photo{ public static void main(String[] args) { try {

python 將圖片存入mongodb，讀取圖片，gridfs模組

匯入圖片引入模組，其中gridfs模組不需要單獨安裝，引入了pymongo即可直接引入 from pymongo import MongoClient from gridfs import * import os #連結mongodb client=MongoClient('localhost',

html 提交表單，圖片和文字一起提交，圖片存入伺服器，圖片地址和表單資訊存入資料庫，帶後端php程式碼

html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no

【java 菜鳥自動化實踐之二】採用POI將圖片存入指定的excel單元格中(支援excel2003和2007)

實現目的：selenium實時擷取瀏覽器圖，並採用POI將圖片存入指定的excel單元格中(支援excel2003和2007) package common; import org.apache.log4j.Logger; import org.apache.poi.hs

方法：C#在WinForm中如何將Image存入SQL2000和取出顯示

close database 耗時 .exe while type comm res orm //保存 sql="insert into p_ry_photo(id,photo) values (‘"+id+"‘,@i)"; SqlComma

原生jS之-去掉字符串開頭和結尾的空字符

思路 lang logs charset 問題 let 空格正則 str1 怎麽解決這個問題？？思路就是我們利用正則匹配到所謂的空格，然後替換為空字符，我們要用到的是str的replace API 代碼如下： 1 <!DOCTYPE html> 2 &

用原生JS實現多張圖片上傳及預覽功能（相容IE8）

最近需要做一個圖片上傳預覽的功能（相容IE8-11、chrome、firefox等瀏覽器），網上現有的檔案上傳元件（如webuploader）總是會遇到一些相容性問題。於是我參考了一些博文（連結找不到了⊙o⊙…），自己用原生JS寫了一個支援多張圖片上傳預覽功能的Demo 先通過最終效果看一下功能：

關於百度富文字配置，應用及將其存入資料庫

1.去官網下載你所需要的富文字原始碼！官網下載地址：http://ueditor.baidu.com/website/download.html 2.將其下載的原始碼，放入你所應用的專案中。如下圖所示：下面的步驟比較重要，我這邊是自定義了UE所顯示的內容： 3. 開啟ue

使用python和opencv將圖片轉化為素描圖-python程式碼解析

實際上為了有效地創造黑白素描圖，你真正需要的是一些模糊和兩張圖片的混合技術，叫做dodging and burning. 用OpenCV、Python一張RGB顏色的影象經過下面四個步驟就能夠生成出一張素描圖：將RGB圖轉化為灰度圖。灰度圖進行反色操作。將步

原生js簡單實現廣告圖片彈出消失

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首頁</title> <style> .father{

動態解析JSON字串，將資料存入資料庫

我在使用netty時候，由於不同裝置發出的JSON字串不一樣，我需要一個動態解析JSON字串方法去解決，我的思路是先將json字串通過gson這個類轉成map,由於在執行期間無法得知T的具體型別，對這個類的物件進行序列化和反序列化都不能正常進行。Gson通過藉助TypeTok

原生JS相容所有瀏覽器獲取瀏覽器高度和寬度,響應式佈局 js 獲取瀏覽器高度和寬度值(相容多瀏覽器)

var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

原生JS判斷頁面中圖片載入完成

自己寫的判斷頁面中圖片載入完成的方法，用原生JS完成，不用jq主要考慮在不載入jq的情況下，程式碼可以正常執行判斷指定ID的盒子中所有圖片載入，demo程式碼如下： <!DOCTYPE HTML> <html> <head> &l

JAVAWEB圖片存入資料庫的圖片的轉碼與譯碼

package foreiger.utils; import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.i

Python網路爬蟲抓取動態網頁並將資料存入資料庫MYSQL

簡述以下的程式碼是使用python實現的網路爬蟲，抓取動態網頁http://hb.qq.com/baoliao/。此網頁中的最新、精華下面的內容是由JavaScript動態生成的。審查網頁元素與網頁原始碼是不同。本人對於Python學習建立了一個小小的學習圈子，為各位提供了

在matlab中如何將圖片（png和jpg）轉成mat格式

在這裡就要介紹兩個函數了，具體的可以在matlab裡面的參考，一個是imread、imwrite和imshow函式，這幾個函式看了以後基本就可以明白了，具體的也很簡單。比如 I = imread('C:\Users\Administrator\Desktop\patches11.jpg');

delphi 把圖片存入資料庫

procedure TForm1.Button2Click(Sender: TObject); //讀取圖片過程var Stream:TMemoryStream; Jpg:TjpegImage;begin ADOQuery1.Close; ADOQuery1.SQL.Text:='SELECT * F

原生js實現淘寶圖片放大功能

目錄結構：HTML:<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="

原生JS實現滑鼠懸停圖片顯示文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

原生js和servlet將圖片存入資料庫和讀取

相關推薦