上一篇將圖片路徑存在DB，而不直接存放圖片在DB
這一篇是從DB取出存放路徑
利用Servlet轉換img tag的src，將圖片顯示
JSP
<h5>照片顯示</h5> <div id="img"> <div class="preview" style="display:inline;"></div> </div>
JS 取得圖片路徑並動態產生圖片
$.ajax({
url:'GetImageServlet',
type : 'POST',
datatype : 'json',
data : {
ajaxAction : 'GET_PICTURE',
},
async : false,
success : function(data, textStatus, xhr) {
console.log(data);
$(".preview").html("");
if(data.result.length > 0){
pictureArray = data.result;
pictureArrayOrg = data.result;
for(var i=0; i<data.result.length;i++){
var elem = "";
elem +="<div class=\"div_"+i+"\">";
elem +="<img id=\"img_"+i+"\" class=\"img\" style=\"margin:10px;border:2px;max-width: 250px;max-height: 250px; solid black;\" src=\""+data.result[i].FILE_PATH+"\">";
elem +="</div>";
$(".preview").append(elem);
}
index = $(".preview").find("div").length;
}
},
error : function(jqXHR,textStatus,errorThrown){
console.log(textStatus);
}
});
從DB取出
package servlet.showImage;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
* Servlet implementation class GetImageServlet
*/
@WebServlet(name="/GetImageServlet", urlPatterns = "/view/GetImageServlet")
public class GetImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public GetImageServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.getWriter().append("Served at: ").append(request.getContextPath());
response.sendRedirect("showImage.jsp");
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
JSONObject json = new JSONObject();
JSONArray jsonArray = new JSONArray();
JSONObject data;
String strPath = "IMG_0007.jpg";//假設DB取出為檔案名稱
//2016/10/13 修改
//若是有兩個網域從A網域到B網域則必須寫出完整的路徑，如下(建議用request.getRequestURL取得自己想要的路徑，如String url = request.getRequestURL+"/ImageServlet?file="+strPath;因為下面方法會取得IP，有些時候是無法用IP)
//String url = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + "/" + request.getRequestURI().toString().split("/")[1] +"/ImageServlet?file="+strPath;
String url = "ImageServlet?file="+strPath;//若只有一個網域則使用此方法即可
try {
data = new JSONObject();
data.put("FILE_PATH", url);
jsonArray.put(data);
json.put("result", jsonArray);
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.setContentType("application/json");
response.getWriter().write(json.toString());
}
}
ImagServlet取得真正的路徑
package servlet.showImage;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ImageServlet
*/
@WebServlet("/ImageServlet")
public class ImageServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public ImageServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doProcess(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doProcess(request, response);
}
protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("image/jpeg");
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
Properties prop = new Properties();
String propFileName = "config.properties";
InputStream inputStream = getClass().getClassLoader().getResourceAsStream(propFileName);
if (inputStream != null) {
prop.load(inputStream);
} else {
throw new FileNotFoundException("property file '" + propFileName + "' not found in the classpath");
}
try {
String fileName = request.getParameter("file");
String path = "";
// get real path of file
//path = parsingImagePath(fileName);
String reSlash = fileName.replaceAll("\\\\","/");//將"\"更換為"/"
String[] splitStr = reSlash.split("/");//做字串分割
path = parsingImagePath(prop.getProperty("path"), reSlash);
// get file as input streaming
bis = new BufferedInputStream(new FileInputStream(new File(path)));
// get the output stream
bos = new BufferedOutputStream(response.getOutputStream());
// output the image as streaming
byte data[] = new byte[4096];
int size = 0;
size = bis.read(data);
while (size != -1) {
bos.write(data, 0, size);
size = bis.read(data);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (bis != null) {
bis.close();
}
if (bos != null) {
bos.flush();
bos.close();
}
}
}
private String parsingImagePath(String dir, String path) {
System.out.println("path:" + path);
return dir+path;
}
}
為什麼src會觸發到ImageServlet?
在JSP的img tag 加入src的時候，browser會判斷這是一個新的element，而且是圖檔，就會自動去做一次讀檔的動作
然後因為是web，所以瀏覽器在這上面的行為，會根據src發出一個request去載圖片回來，這個request不是可以控制的，自動會觸發
我們只需要在server side做一個接request，把圖片改成binary stream做flush回去UI的行為並close，這樣就算讀檔完成