Mehrere Bilder von Servlet anzeigen

Question

Ich versuche, mehrere Bilder von Servlet in einer JSP-Seite für mein Karussell anzuzeigen, aber nur das erste Bild angezeigt. Ich möchte wissen, wie alle Ergebnisse der Sql-Abfrage angezeigt werden. Der Servlet-Code ist

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
    // TODO Auto-generated method stub  

    //response.setContentType("image/jpg"); 
    HttpSession myses = request.getSession(true); 

    String imageid = request.getParameter("id"); 
    //System.out.println("In servlet"+imageid); 

    ServletOutputStream o; 

    try { 
     Class.forName(driverName); 
     con = DriverManager.getConnection(url,userName,password); 
     String sql = "select mid from carousel_two where cid= '"+imageid+"'"; 
     PreparedStatement stmt = con.prepareStatement(sql); 
     ResultSet rs = stmt.executeQuery(); 
     myses.setAttribute("lis",rs); 
     byte[] obj = new byte[1434295]; 
     byte[] sample = null; 
     int srcPos = 0; 
     //int i=0; 
     //String encoded =new String(); 
     o = response.getOutputStream(); 

     java.util.List<String> strings = new ArrayList<String>(); 

     //StringJoiner joiner = new StringJoiner(","); 

     if(rs!=null) {     
      while(rs.next()) { 
       String sql1 = "select img from carousel_two where mid= '"+rs.getInt("mid")+"'"; 
       PreparedStatement stmt1 = con.prepareStatement(sql1); 
       ResultSet rs1 = stmt1.executeQuery(); 
       if(rs1!=null) { 
        while(rs1.next()){ 
        //int id = rs.getInt(1); 
        //System.out.println("id = "+id); 
        sample = rs1.getBytes("img"); 
        int length = sample.length; 
        System.arraycopy(sample, 0, obj,srcPos, length); 
        srcPos += length; 

        //System.out.println("Length required = " + srcPos); 

        //if(rs!=null) {     
         //System.out.println("mid"+rs.getInt("mid")); 
         //o.write(rs.getBytes("img")); 
         byte[] newArray = new byte[srcPos]; 
         System.arraycopy(obj, 0, newArray, 0, srcPos); 

         response.setContentType("image/jpg"); 
         // response.getOutputStream().write(newArray); 

         strings.add(DatatypeConverter.printBase64Binary(newArray)); 
         //System.out.println(strings+"\n"); 

         // encoded=DatatypeConverter.printBase64Binary(newArray);   
        } 
       }   
      //} 
      } 
    } 
    //int x=(encoded.split(";")).length; 
    // System.out.println("X"+x); 

     //encoded=String.join(",", strings1); 
     //encoded= String.join(",", strings); 
     String json = new Gson().toJson(strings); 
     response.setContentType("application/json"); 
     response.setCharacterEncoding("UTF-8"); 
     o.print(json); 
     o.flush();         
    }catch (Exception e) { 
    e.printStackTrace(); 
    } 
} 

und der Javascript-Code ist

function trigger(idx, state) { 
    document.getElementById('touchScroller').innerHTML=" "; 
    $.ajax({ 
     type : "GET", 
     url : "Sampleimage1", 
     contentType :"application/json", 
     data:{id:idx}, 
     success : function(data) { 
      var da=data; 
      //da=data.split(","); 
      //alert(typeof data); 
      //alert(da.length); 
      $.each(da,function(index,item){ 
      alert(index); 

      $('#touchScroller').append('<img src="data:image/jpg;base64,' +item +'" />'); 
     });           
    }       
    }); 
} 

ist ein Neuling auf dieser so wird jede Hilfe dankbar.

Answer 1

#edit

die innere Ersetzen while-Schleife für ResultSet mit der folgenden

while(rs1.next()){ 
    byte[] dbImageArr = rs1.getBytes("img"); 
    strings.add(DatatypeConverter.printBase64Binary(dbImageArr)); 
} 

Das ist alles gebraucht wird, Rest ignoriert werden kann. Dies sollte Ihr Problem beheben.

Vorschläge:

Ein einzelner HTTP-Aufruf einen single image resource (oder binären Inhalt) zurückkehren kann. Sie müssen das Servlet mehrmals mit dem Namen oder anderen identifizierbaren Informationen des Bildes aufrufen, wobei das Servlet das korrekte Bild zurückgibt.

Dies wäre der richtige Weg, es zu tun. Angenommen, Sie benötigen eine Gruppe von Bildern. Sie wissen, dass der Gruppenname g1 ist und 5 Bilder darin enthalten sind. Sie würden Bildverknüpfungen wie folgt erstellen.

<img src="/ImageServlet?group=g1&seq=1> 
<img src="/ImageServlet?group=g1&seq=2> 
<img src="/ImageServlet?group=g1&seq=3> 
<img src="/ImageServlet?group=g1&seq=4> 
<img src="/ImageServlet?group=g1&seq=5> 

Dies würde 5 Aufrufe an das Servlet machen und die Bilder auf der Basis von Gruppenname und Sequenznummer zurückgeben.

Wenn Sie unbedingt alle Bilder in einem Schritt zurückgeben möchten, müssen Sie sie in Base64-Zeichenfolge konvertieren. Dann können Sie JSON (oder jedes andere Format, das Sie für richtig halten) mit dem Inhalt von Base64 zurückgeben.

{ 
    "img1": "data:image/png;base64,i.....", 
    "img2": "data:image/png;base64,i.....", 
    "img3": "data:image/png;base64,i.....", 
    "img4": "data:image/png;base64,i.....", 
    "img4": "data:image/png;base64,i....." 
} 

Hinweis: Erste Methode ist die richtige Methode und hat den Vorteil in Bezug auf Leistung und Bandbreitennutzung. Da würden 5 parallele Anrufe getätigt werden, um die Bilder zu erhalten, und jedes heruntergeladene Bild würde angezeigt werden, ohne darauf zu warten, dass andere den Download abschließen.

Natürlich gibt es die Möglichkeit, Bilder zusammenzufügen, wie es beim Laden von Sprites für Spiele gemacht wird, aber Sie wollen wahrscheinlich nicht so weit gehen.