Vorschau Bild vor dem Hochladen in Struts 2.3

Question

Ich möchte eine Datei in der Datenbank mit Struts2 hochladen, aber das Problem ist, ich möchte das Foto zeigen, wenn ich das Foto auf der gleichen Seite auswählen.

Bild zeigt diese von dem Programm.

index.jsp

<s:form action="UploadAction.action" enctype="multipart/form-data"> 
    <s:textfield name="ename" required="true" label="Emp Name" /> 
    <s:file name="photo" label="Photo" required="true" /> 
    <s:submit value="U P L O A D" /> 

</s:form> 

UAction.java

public class UAction { 

String ename, photo, msg; 

public String execute() throws Exception { 
    msg = com.db.Admin.addemp(ename, photo); 
    setEname(""); 
    return "SUCCESS"; 
} 

Photo.java

public class Photo extends HttpServlet { 
private static final long serialVersionUID = 1L; 

protected void service(HttpServletRequest request, HttpServletResponse response) 
     throws ServletException, IOException { 

    String empno = request.getParameter("e"); 
    try { 
     ResultSet rs = com.db.Admin.getPhoto(empno); 
     if (rs.next()) { 
      Blob ph = (Blob) rs.getBlob(1); 
      byte data[] = ph.getBytes(1, (int) ph.length()); 
      ServletOutputStream out = response.getOutputStream(); 
      out.write(data); 
     } 
    } catch (Exception e) { 
     e.getMessage(); 
    } 
} 

}

Admin.java

public static String addemp(String ename, String photo) { 
    try { 
     CallableStatement cs = connect().prepareCall("{call addEmp(?,?,?)}"); 

     cs.setString(1, ename); 
     FileInputStream r = new FileInputStream(photo); 
     cs.setBinaryStream(2, r); 
     cs.registerOutParameter(3, Types.VARCHAR); 
     cs.execute(); 
     return cs.getString(3); 
    } catch (Exception e) { 
     return e.getMessage(); 
    } 
} 

public static ResultSet getData() throws Exception { 
    return connect().prepareCall("{call getData()}").executeQuery(); 
} 

public static ResultSet getPhoto(String empno) throws Exception { 
    CallableStatement cs = connect().prepareCall("{call getPhoto(?)}"); 
    cs.setString(1, empno); 
    return cs.executeQuery(); 
} 

}

Answer 1

Dies sollte mit einigen JavaScript-Code ausgeführt werden.

<img id="imagePlaceHolder" alt="your image" width="100" height="100" /> 
<s:file name="photo" label="Photo" required="true" 
    onchange="document.getElementById('imagePlaceHolder').src = window.URL.createObjectURL(this.files[0])" 
/> 

Sie können Preview an image before it is uploaded mehr Lösungen finden