として、私は、ファイルから画像を選択し、読むために次のコードを使用しています:JSP、JavaScriptを:表示バイトが[]の画像
<div class="col-md-6 form-group">
<input type='file' name="image" onchange="readURL(this);"
class="form-control" />
<img id="userimg" src="#" alt="" />
</div>
の.js:私は変換私のサーブレットで
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#userimg')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
をファイルをbyte[]
:
(request.getParameter("image")).getBytes()
に挿入してデータベースに挿入します。
その後、私はこのように、の.jspページ内のデータベースおよびディスプレイからそれを読み取ろう:
.jspという
<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>
ImageHelper.java:
public static String encodeImage(byte[] img) {
return Base64.encode(img);
}
が、イメージは正しく表示されません(何かがデータベースに挿入されます)。
編集:
私は自分のコードを変更しました:
が.jsp:
<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);
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エンコーディングのないレスポンスに直接バイトを書き込んで、そのサーブレットに 'img'タグのURLを直接指さないのはなぜですか? – tsolakp
'Base64.getEncoder()。encode(img)'を使用するとどうなりますか?また、画像がJPEGであることを確認しましたか? – pyb
@pyb確かにJPG。私はチェックしました - エンコードされているのは画像の名前です。私はちょうど 'encode(img)'が返されたものをデコードし、私のファイルの名前を得ました。 – Eutherpy