JSP,JavaScript:将字节[]显示为图像
我使用以下代码段从文件中选择和读取图像:JSP,JavaScript:将字节[]显示为图像,javascript,java,html,jsp,Javascript,Java,Html,Jsp,我使用以下代码段从文件中选择和读取图像: <div class="col-md-6 form-group"> <input type='file' name="image" onchange="readURL(this);" class="form-control" /> <img id="userimg" src="#" alt="" /> </div> 在我的servlet中,我将文件转换为字节[]:
<div class="col-md-6 form-group">
<input type='file' name="image" onchange="readURL(this);"
class="form-control" />
<img id="userimg" src="#" alt="" />
</div>
在我的servlet中,我将文件转换为字节[]:
并将其插入数据库
然后,我尝试从数据库中读取它并显示在.jsp页面中,如下所示:
.jsp
但是图像显示不正确,有些东西确实被插入到数据库中
编辑:
我修改了我的代码:
.jsp:
PictureTable.java:
public static void insertConcertPicture(int concertId, int userId, InputStream photo) {
try (Connection connection = ConnectionPool.getConnectionPool().checkOut()) {
PreparedStatement ps = connection
.prepareStatement("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?,?,?)");
...
ps.setBinaryStream(3, photo);
ps.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
}
图像仍然没有正确显示,但现在页面的提交部分甚至不可见。有很多方法可以做到这一点。我将返回base64字符串并将其存储在数据库中。然后,您可以将其返回到JSP以呈现它 为此,您必须:
<input type="file" name="file" onchange="encodeImageFileAsURL(this)" />
<form method="POST" action="/upload">
<input id="image" type="text" name="image" value="asdf" /><br />
<br /> <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
document.getElementById("image").value = reader.result;
}
reader.readAsDataURL(file);
}
</script>
然后转到uploadStatus页面:
<img src=${image}>
不要对Spring部分感到困惑,您应该记住,您必须将base64字符串从jsp发布到服务器,然后存储它。然后将其作为字符串检索,并将其传递给image src标记中的jsp,然后将显示该图像。如果没有具体的原因让您将图像作为blob存储到数据库中,您必须按照上面的方法进行操作。我相信您的一些问题是技术性的,有些是方法学相关的。我的回答主要集中在方法上 我们在JavaScript客户端和C Web API服务器上做了类似的事情。我们采用了下面一个非常简单的开发/验证模型,该模型允许我们在数据进行转换的每个点快速发现并隔离错误 我们最初与您似乎正在经历的许多相同问题进行了斗争。我们如何解决我们的问题可能对你有所帮助 用户tsolakp提出了一个很好的观点。应该考虑直接返回字节数据。如果你要从客户机到服务器去二进制,那么我建议你认真考虑它的下载数据。我们对大部分数据使用二进制上传/下载。我知道这在当今并不流行,但在我们的系统中,它确实要有效得多 你提到: src=数据:图像/jpg;base64,/9j/4AAQSKZJRGABAQEAAAAD/4Zf2RXhpZgAATU0AKgAAAAg…此 持续很长时间 这是你可以控制的。我建议您创建一个非常小的jpeg,它很容易被人读取/验证,并使用它来增量验证您的上传和下载流 我们在javascript客户端上传二进制数据时使用了以下代码流 var字节[]=atobjpeg字符串; var xhr=新的XMLHttpRequest; 打开。。。 xhr.onload。。。 xhr.setRequestHeaderContent-type,应用程序/八位字节流;
xhr.sendnewuint8arraybyte[];为什么不在没有Base64编码的情况下直接将字节写入响应,并将img标记url直接指向该servlet?当您使用Base64.getEncoder.encodeimg时会得到什么?你也检查过你的图像是JPEG格式的吗?@pyb绝对是JPG格式的。我查过了-被编码的是图片的名字。我刚刚解码了encodeimg返回的内容,得到了我的文件名。你说提交按钮不再可见。在浏览器中查看源代码时会得到什么?@pyb I get:src=data:image/jpg;base64、/9j/4AAQSKZJRGABAQEAAAAAD/4ZF2RXHPZGAATU0AKGAAAG……这种情况持续了很长时间。之后,还有提交按钮的代码。
public static String encodeImage(byte[] img) {
return Base64.encode(img);
}
<div class="comments">
<div class="panel panel-success">
<h2>Pictures</h2>
<%
List<byte[]> pics = PictureTable.getConcertPictures(concertBean.getId());
%>
<%
for (byte[] p : pics) {
String encoded = ImageHelper.encodeImage(p);
%>
<img src="data:image/jpg;base64,<%=encoded%>">
<%
}
%>
</div>
<!-- /container -->
<form
action="GalleryController?action=add_concert_picture&concertID=<%=concertBean.getId()%>"
method="post" class="panel panel-success"
enctype="multipart/form-data">
<div class="col-md-6 form-group">
<input type='file' name="image" class="form-control" />
</div>
<button type="submit" class="btn">Submit</button>
</form>
</div>
Part filePart = request.getPart("image");
InputStream fileContent = filePart.getInputStream();
PictureTable.insertConcertPicture(cid, user.getUser().getId(), fileContent);
public static void insertConcertPicture(int concertId, int userId, InputStream photo) {
try (Connection connection = ConnectionPool.getConnectionPool().checkOut()) {
PreparedStatement ps = connection
.prepareStatement("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?,?,?)");
...
ps.setBinaryStream(3, photo);
ps.executeUpdate();
} catch (Exception e) {
e.printStackTrace();
}
}
<input type="file" name="file" onchange="encodeImageFileAsURL(this)" />
<form method="POST" action="/upload">
<input id="image" type="text" name="image" value="asdf" /><br />
<br /> <input type="submit" value="Submit" />
</form>
<script type="text/javascript">
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
document.getElementById("image").value = reader.result;
}
reader.readAsDataURL(file);
}
</script>
@PostMapping("/upload")
public ModelAndView singleFileUpload(@RequestParam("image") String image, RedirectAttributes redir) {
jdbcTemplate.update("INSERT INTO concertphototable(ConcertId, UserId, Photo) VALUES(?, ?, ?)", 1, 1, image);
String imageString = jdbcTemplate.queryForObject("Select Photo from concertphototable where ConcertId = " + 1,
String.class);
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("redirect:uploadStatus");
redir.addFlashAttribute("image", imageString);
return modelAndView;
}
<img src=${image}>