我尝试使用以下代码在jsp
上展示多个图片:
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(bi, "jpg", baos);
baos.flush();
byte[] imageInByteArray = baos.toByteArray();
baos.close();
String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(imageInByteArray);
out.println("<td><img src=\"data:image/jpg;base64, " + b64 + "\" "
+ "class=\"img-responsive\" "
+ "width=\"304\" height=\"236\"/></td>");
但是在浏览器中我收到一条错误消息:
获取数据:image / jpg; base64, / 9J / 4AAQSkZJRgABAgAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgK ... FMAooooAWkoooAa3SozRRTASgUUUALRRRQAUUUUCH9qZRRQAlFFFABRRRQAUUUUAFFFFAH / 9K = 净:: ERR_INVALID_URL
那个Doctype标签好像在我的base64字符串里面...... 我试图删除该标记,连同换行符,图像确实显示出来。但有时,当我更改图像时,Doctype标记似乎位于页面的另一部分,如下所示:
我正在使用Netbeans 8.0和Apache tomcat 8.0
有人可以帮我解决这个问题吗?
编辑:
这是一个自定义页面,用于创建基于元素(insMap变量)自动生成表单的动态表单。我的代码有点混乱,因为我还在测试页面......但是,有些建议会很好。
我的完整代码:
<%--
Document : CallFOrm
Created on : Dec 1, 2015, 12:39:03 AM
Author : Darkside
--%>
<%@page import="javax.imageio.ImageIO"%>
<%@page import="java.io.ByteArrayOutputStream"%>
<%@page import="SimpleKubraLib.Misc.ImageOperation"%>
<%@page import="java.awt.image.BufferedImage"%>
<%@page import="Connection.Connection"%>
<%@page import="SimpleKubraLib.Conn.DML.MySQL.DataRetrieve"%>
<%@page import="java.util.List"%>
<%@page import="java.util.LinkedHashMap"%>
<%@page import="java.util.Map"%>
<%!
private List<Object[]> getDataRef(java.sql.Connection conn, String colRefs[]) {
String sql = " select " + colRefs[0] + ", " + colRefs[1] + " "
+ " from " + SimpleKubraLib.Misc.StringOperation.getSchemaTableName(colRefs[0]) + " ";
return new DataRetrieve().getData(conn, sql, 2);
}
%>
<h1 class="text-center"><%= request.getAttribute("PageTitle")%></h1>
<div style="display:none" id="FormAlertHeader" class="alert alert-danger text-center">
Mohon periksa input anda!
</div>
<form method="post" action="../Form/FormHandle" class="form-horizontal" role="form"
enctype="multipart/form-data">
<%
Object mode = request.getParameter("FormMode");
if (mode == null) {
mode = "insert";
}
mode = SimpleKubraLib.Misc.StringOperation.replaceWord(mode.toString(), "_");
Map<String, Object[]> insMap = (LinkedHashMap<String, Object[]>) request.getAttribute("insMap");
Object labClassSize = request.getAttribute("LabelClassSize");
if (labClassSize == null) {
labClassSize = "col-xs-2";
}
Object inpClassSize = request.getAttribute("InputClassSize");
if (inpClassSize == null) {
inpClassSize = "col-xs-2";
}
String labClassSizeOffset = labClassSize.toString();
labClassSizeOffset = labClassSizeOffset.substring(0, labClassSizeOffset.indexOf("-", 4) + 1)
+ "offset" + labClassSizeOffset.substring(labClassSizeOffset.lastIndexOf("-"), labClassSizeOffset.length());
for (Map.Entry ent : insMap.entrySet()) {
String key = ent.getKey().toString();
Object[] vals = (Object[]) ent.getValue();
Object realVal = (vals[1] != null ? vals[1] : (vals[8] == null ? null
: (SimpleKubraLib.Misc.StringOperation.getDeffVal(vals[8].toString()))));
String tipe = vals[2].toString().toString();
if (tipe.equals("select")) {
if (vals[5] != null) {
tipe = "mul";
} else if (vals[3] != null) {
tipe = "enum";
}
} else if (tipe.equals("file")) {
if (vals[7] != null && vals[7].toString().equals("image")) {
tipe = vals[7].toString();
}
} else if (tipe.equals("number")) {
if (vals[3] != null) {
tipe = vals[3].toString();
}
}
boolean en = vals[9] == null ? true : Boolean.parseBoolean(vals[9].toString());
// (vals[4] != null && vals[4].toString().equals("pri") ? false : ))
// out.println(vals[4] + "<br>" + vals[8] + "<br>" + mode + "<br>");
en = ((vals[4] != null && vals[4].toString().equals("pri")
&& vals[8] != null && !vals[8].toString().equals("")
&& mode.toString().equals("Insert"))
|| (vals[4] != null && vals[4].toString().equals("pri")
&& mode.toString().equals("Update"))
? false : en);
// <div class="form-group has-error has-feedback">
// <label class="control-label" for="inputError2">Input with error</label>
// <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
// <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
// <span id="inputError2Status" class="sr-only">(error)</span>
//</div>
// maxlength="10"
if (vals[2].toString().equals("text")) {
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\""
+ " type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
+ " " + (en ? "" : "disabled") + " "
+ " " + (vals[6] == null ? "" : "maxlength=\"" + ((int) vals[6]) + "\"") + ">"
// + " <span class=\"help-block\">Please correct the error</span>"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
} else if (vals[2].toString().equals("date")) {
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\""
+ " type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
+ " " + (en ? "" : "disabled") + ">"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
} else if (vals[2].toString().equals("textarea")) {
out.println("<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <textarea class=\"form-control\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\""
+ " " + (en ? "" : "disabled") + " rows=\"3\">" + (realVal == null ? "" : realVal) + "</textarea>"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
} else if (vals[2].toString().equals("file")) {
if (vals[7].toString().equals("image")) {
if (realVal != null) {
BufferedImage bi = ImageOperation.convertToBi(realVal);
if (bi != null) {
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(bi, "jpg", baos);
baos.flush();
byte[] imageInByteArray = baos.toByteArray();
baos.close();
String b64 = javax.xml.bind.DatatypeConverter.printBase64Binary(imageInByteArray);
out.println("<td><img src=\"data:image/jpg;base64, " + b64 + "\" "
+ "class=\"img-responsive\" "
+ "width=\"304\" height=\"236\"/></td>");
}
}
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <div class=\"fileinput fileinput-new\" data-provides=\"fileinput\">"
+ " <div class=\"fileinput-preview thumbnail\" data-trigger=\"fileinput\" "
+ " style=\"width: 200px; height: 150px;\">"
+ " </div>"
+ " <div>"
+ " <span class=\"btn btn-default btn-file\">"
+ " <span class=\"fileinput-new\">Select image</span>"
+ " <span class=\"fileinput-exists\">Change</span>"
+ " <input type=\"file\""
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\" >"
+ " <input type=\"hidden\""
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "b64\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe + "b64"
+ (Character.toString((char) 28)) + vals[4] + "\" "
+ " value=\"" + (realVal == null ? "" : realVal) + "\">"
+ " </span>"
+ " <a href=\"#\" class=\"btn btn-default fileinput-exists\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "href\" "
+ " data-dismiss=\"fileinput\">Remove</a>"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ " </div>"
+ " </div>"
+ "</div>"
);
} else {
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <input class=\"form-control\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\" "
+ " type=\"" + tipe + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
+ " " + (en ? "" : "disabled") + ">"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
}
} else if (vals[2].toString().equals("datetime-local")) {
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\" "
+ " type=\"" + tipe + "\" "
+ " value=\"" + (realVal == null ? "" : realVal.toString().replace(" ", "T")) + "\" "
+ " " + (en ? "" : "disabled") + ">"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
} else if (vals[2].toString().equals("select")) {
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <select class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\" "
+ " " + (en ? "" : "disabled") + ">");
out.println("<option value=\"\">- Select -</option>");
if (vals[5] != null) {
request.getRequestDispatcher("../Main/SetConn.jsp").include(request, response);
Connection conn = (Connection) request.getAttribute("SQLConnection");
if (conn != null) {
String colRefs[] = vals[5].toString().split(Character.toString((char) 28));
List<Object[]> dataRef = this.getDataRef(conn.getMySQLConn(), colRefs);
Object v = realVal == null ? "" : realVal;
for (Object[] data : dataRef) {
out.println("<option value=\"" + data[0] + "\" " + (v.equals(data[0]) ? "selected" : "") + ">"
+ "" + data[1] + "</option>");
}
if (conn.getMySQLConn() != null) {
conn.getMySQLConn().close();
}
}
} else if (vals[3] != null) {
String valsEnum[] = vals[3].toString().split(Character.toString((char) 28));
Object val = realVal == null ? "" : realVal;
for (String v : valsEnum) {
out.println("<option value=\"" + v + "\" " + (val.equals(v) ? "selected" : "") + ">"
+ "" + v + "</option>");
}
}
out.println(" </select>"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"true\"></span>"
+ " </div>"
+ "</div>");
} else if (vals[2].toString().equals("number")) {
double step = vals[3].toString().equals("int") ? 1 : vals[3].toString().equals("double") ? 0.01 : 1;
out.println(""
+ "<div id=\"" + key + (Character.toString((char) 28)) + tipe + "div\" "
+ "class=\"form-group\">"
+ " <label class=\"" + labClassSize + " control-label\">" + vals[0] + "</label>"
+ " <div class=\"" + inpClassSize + "\">"
+ " <input class=\"form-control\" id=\"" + key + (Character.toString((char) 28)) + tipe + "\" "
+ " name=\"" + key + (Character.toString((char) 28)) + tipe
+ (Character.toString((char) 28)) + vals[4] + "\" "
+ " type=\"" + vals[2] + "\" value=\"" + (realVal == null ? "" : realVal) + "\" "
+ " " + (en ? "" : "disabled") + " step=\"" + step + "\">"
+ " <span style=\"display:none\" "
+ " id=\"" + key + (Character.toString((char) 28)) + tipe + "icon\" "
+ " class=\"glyphicon glyphicon-remove form-control-feedback\" "
+ " aria-hidden=\"tru\"></span>"
+ " </div>"
+ "</div>");
}
}
%>
<div class="form-group">
<div class="<%= labClassSizeOffset%> <%= inpClassSize%>">
<button type="button" class="btn btn-primary btn-md" onclick="cekInput()">
<span class="glyphicon glyphicon-floppy-disk"></span> <%= mode%>
</button>
<button type="button" class="btn btn-warning btn-md" onclick="cleanField()">
<span class="glyphicon glyphicon-erase"></span> Bersihkan
</button>
<button id="SubmitFormHandle" type="submit" class="btn btn-warning btn-md" style="display: none;">
<span class="glyphicon glyphicon-erase"></span> Submit
</button>
</div>
</div>
<input type="hidden" name="MainTab" value="<%= request.getAttribute("MainTab")%>">
<input type="hidden" name="FormMode" value="<%= request.getAttribute("FormMode")%>">
<input type="hidden" name="Master" value="<%= request.getAttribute("Master")%>">
<%
String id = (String) request.getParameter("id");
if (id != null) {
%>
<input type="hidden" name="ID" value="<%= request.getParameter("id")%>">
<%
}
%>
</form>
答案 0 :(得分:0)
javax.xml.bind.DatatypeConverter
是生成二进制数据的base64表示的一个奇怪选择。请展示您的更多JSP - 您的 doctype 可能会在其他地方生成。
尝试Commons-Codec Base64实施:
console.log(form, form.fieldName.$touched)