java 从数据库动态显示多张图片到jsp？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17821090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically display multiple images from database to jsp?
提问by user1888771
Hello fellow stack overflowers.
你好，堆栈溢出者。
I am stuck on a certain portion of a project and am looking for some advice.
我被困在项目的某个部分，正在寻找一些建议。
I have a photo gallery page in jsp that is set up to display all the listings of photo albums and the photos within them based on the user's interest. It is currently set up so that whatever 'photo' option is selected will be redirected to another jsp with the outputstream decoding on that particular page. However, in order to see another photo or image, the user has to go 'back' to the photo galleries page and select another image for a new photo.
我在 jsp 中有一个照片库页面，该页面被设置为根据用户的兴趣显示相册的所有列表和其中的照片。它当前的设置是，无论选择什么“照片”选项，都将被重定向到另一个具有该特定页面上的输出流解码的 jsp。然而，为了查看另一张照片或图像，用户必须“返回”到照片画廊页面并为新照片选择另一张图像。
Is there a way to set up the galleries page so that all the photos can be dynamically displayed on the page OR is there possibly a way put some direction on the display.jsp page so that the user can simply click from one photo to the next?????
有没有办法设置画廊页面，以便所有照片都可以动态显示在页面上，或者有没有办法在 display.jsp 页面上放置一些方向，以便用户可以简单地从一张照片点击到下一张?????
Code is below.
代码如下。
<div id="subSlideshow">
<table>
<tr>
<td id="subpageSlideshow">
<table>
<tr>
<td>
<h1 id="subpageTitle">Galleries</h1>
<form action="gallery" method="get">
<%try{
Connection conn = GalleriesConnection.connect();
Statement st = conn.createStatement();
String sql = "SHOW TABLES IN GALLERIES;";
ResultSet rs = st.executeQuery(sql);
while(rs.next()){%>
<input class="wineDiv" type="submit" name="gallery" value="<%=rs.getString(1).toLowerCase() %>" />
<%}
rs.close();
st.close();
GalleriesConnection.close(conn);
}
catch(Exception e){
}%>
</form>
<td>
</tr>
<tr>
<td>
<h1 id="subpageTitle">Images</h1>
<form action="pictures/display.jsp">
<%try{
Connection conn = GalleriesConnection.connect();
Statement st = conn.createStatement();
String sql = "SELECT PHOTO_NAME FROM "+gallery+" ;";
ResultSet rs = st.executeQuery(sql);
while(rs.next()){
String photoName = rs.getString(1);
%>
<input class="wineDiv" type="submit" name="photo" value="<%=photoName %>" />
<% }
rs.close();
st.close();
GalleriesConnection.close(conn);
} catch(Exception e){
}%>
</form>
</td>
</tr>
</table>
</td>
<td id="subpageInfo">
<h1 id="subpageTitle">Click on an image to see a larger view</h1>
<div id="slider">
<script src ="js/slides.js" type="text/javascript"></script>
<img id="1" src="pictures/winery_image1.jpg" />
<img id="2" src="pictures/winery_image2.jpg" />
<img id="3" src="pictures/winery_image3.jpg" />
<img id="4" src="pictures/winery_image4.jpg" />
<img id="5" src="pictures/winery_image5.jpg" />
</div>
<input class="previous" onclick="prev(); return false;" value="Previous Image" />
<input class="next" onclick="next(); return false;" value="Next Image" />
</td>
</tr>
</table>
</div>
All the action on the page is within this div. The first connection command retrieves all the table names in the database and spits the table names out on submit buttons. Additionally, the images currently listed in the subpageInfo are one of the desired spots on where I would like images from the database to be embedded. They make a nice little fadeOut() fadeIn() transition when the next and previous buttons are selected.
页面上的所有操作都在这个 div 中。第一个连接命令检索数据库中的所有表名，并在提交按钮上输出表名。此外，当前在 subpageInfo 中列出的图像是我希望嵌入数据库中图像的所需位置之一。They make a nice little fadeOut() fadeIn() transition when the next and previous buttons are selected.
The second connection gets all the names of the photos and puts them in the form of submits as well. Selected photo names are sent to this page:
第二个连接获取照片的所有名称，并将它们以提交的形式放置。选定的照片名称将发送到此页面：
<%@ page import="java.sql.*"%>
<%@ page import="java.io.*"%>
<%
byte[] imgData = null;
%>
<jsp:scriptlet>
String photo = request.getParameter("photo");
</jsp:scriptlet>
<%
try {
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:8889/GALLERIES","myusername","mypassword");
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery("SELECT PHOTO FROM PHOTOS WHERE PHOTO_NAME = '"+photo+"';");
while (rs.next()) {
Blob image = rs.getBlob(1);
imgData = image.getBytes(1,(int)image.length());
}
// display the image
response.setContentType("image/png");
OutputStream o = response.getOutputStream();
o.write(imgData);
o.flush();
o.close();
rs.close();
stmt.close();
con.close();
} catch (Exception e) {
out.println("Unable To Display image");
out.println("Image Display Error=" + e.getMessage());
return;
}
%>
This program does everything it is asked to do, but I am having some difficulty on making it more user friendly. The desired effect is either embed the images in the subpageInfo div or to have some directives on the display.jsp page to go from one image to the next.
这个程序完成了它被要求做的所有事情，但我在使它更用户友好方面遇到了一些困难。所需的效果是将图像嵌入 subpageInfo div 中，或者在 display.jsp 页面上设置一些指令以从一个图像转到下一个图像。
As always any and all help is greatly appreciated.
与往常一样，非常感谢任何和所有帮助。
回答by Lenymm
If you want to present a set of pictures I'd go for:
如果你想展示一组图片，我会去：
http://lokeshdhakar.com/projects/lightbox2/
http://lokeshdhakar.com/projects/lightbox2/
Or if you want to do everything yourself, use only one page - use the selection form you mentioned and after sumbition, reload the same page including a decoded image into it. You can setup a javascript so that everytime user selects another picture the form gets submited so user doesn't have to click submit.
或者，如果您想自己完成所有操作，请仅使用一页 - 使用您提到的选择表单，然后在汇总后重新加载包含解码图像的同一页面。您可以设置一个 javascript，以便每次用户选择另一张图片时，表单都会被提交，这样用户就不必单击提交。
But I suggest rethinking the whole thing. What's your goal? Is this approach the best one? I'm usually way too deep in technical stuff that I don't see the solution user expects. That's why I ask random people to help me out.
但我建议重新考虑整个事情。你的目标是什么？这种方法是最好的方法吗？我通常对技术内容太深入了，我看不到用户期望的解决方案。这就是为什么我请随机的人来帮助我。
Also - scriptlets? ew! Use JSTL and prepare everything in the controller. Or use Primefaces, JSF, managed beans and all the stuff that was made for this purpose.
还有 - 小脚本？哎呀！使用 JSTL 并准备控制器中的所有内容。或者使用 Primefaces、JSF、托管 bean 和所有为此目的而制作的东西。
