授業第14回 画像をアップロードできるBlog(2)
tci10006.jar専用
準備
$cp
/home/hanrin/tci10006.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
$cp /home/hanrin/commons-io-2.1.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
$cp /home/hanrin/commons-fileupload-1.2.2.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
を実行し、必要なjarをWEBINF/libにコピーしておいてください。
このタグライブラリは、テーブルの形が決まっており、画像もJPGだけしかアップロードできません。
この方式を変えたい、というひとは、先生に言ってください。好きな形して、コンパイルします。
*お知らせ tci10006.jarを使う人へ
大事なファイルを入れ忘れました。もう一度、tci10006.jarをコピーし直してから使ってください。
1、フォームでファイルをアップロードする
このタグライブラリは、以下のテーブルでしか動作出来ません。
テーブル名は自由で構いませんが、列名は、同じでなければなりません。
drop table bt_gakusei; create table bt_gakusei( id serial primary key, name varchar(100), title varchar(400), comment varchar(400), filename varchar(400),
dpass varchar(100), cdate timestamp default now(), img bytea, rid int ); grant all on bt_gakusei to tomcat; grant all on bt_gakusei_id_seq to tomcat;
フォームは、投稿されたスレッドにコメントを付けられるようになっています
<form method="post" enctype="multipart/form-data" action="fileupload.jsp" id="mf">
<table class="ftbl">
<tr>
<td class="ftd">名前：</td>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<td class="ftd">タイトル：</td>
<td><input type="text" name="title" value="" /></td>
</tr>
<tr>
<td class="ftd">コメント：</td>
<td> 何番へのコメント？:
<sql:query sql="select * from bt_gakusei where rid = 0 order by id desc limit 3;" var="com"/>
<select name="rid">
<option value="">新しいスレッド</option>
<c:forEach var="a" items="${com.rows}" varStatus="jl">
<option value="${a.id}">たいとる:${a.title}へ返信</option>
</c:forEach>
</select><br />
<textarea rows="5" cols="40" name="comment"></textarea></td>
</tr>
<tr>
<td class="ftd">添付File：</td>
<td><input type="file" name="img" value="set" /></td>
</tr>
<tr>
<td class="ftd">削除キー：</td>
<td><input type="password" name="dpass" value="" size="20" maxlength="8" /></td>
</tr>
<tr>
<td class="ftd">書き込み実行：</td>
<td><input type="submit" value="書き込む" /></td>
</tr>
</table>
</form>
２、JSPでのタグの使用
JSPに
<%@ taglib uri="/tci10006" prefix="gh" %>
を追加すると使えるようになります。
全ソースコード公開
----index.jsp
<%@ page contentType="text/html; charset=UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<sql:setDataSource dataSource="jdbc/tci10006" />
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
<title>卒業制作</title>
<style>
body {
background-color:#87CEFA;
}
h1 {
background-color:#F4A460;
font-size:25px;
}
h2 {
background-color:#F4A460;
font-size:25px;
}
.ftbl {
table-layout:fixed;
width: 478px;
margin: 0px auto;
}
.ftd {
background-color:#F08080;
width:100px;
font-size:12px;
}
#header {
text-align: center;
}
#list {
margin: 0px 300px;
}
#footer {
text-align: center;
}
.com {
position: relative;
left: 100px;
top: -10px;
background-color: #f4f3f2;
padding: 30px;
color: #C60;
font-size:12px;
}
.di1{
padding: 4px;
background: #D2E2FF;
font-size: 14px;
}
ul {
margin-top: 50px;
font-size: 12px;
padding: 0px;
border: 1px solid #663300;
border-spacing: 0px;
background-color:#ffffff;
}
li {
list-style-position: inside;
border-right: 1px solid #663300;
border-bottom: 1px solid #663300;
color: #330000;
background-color: #eeeeee;
padding: 0.3em 1em;
text-align: left;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<h1>画像投稿掲示板</h1>
</div>
<div id="content">
<form method="post" enctype="multipart/form-data" action="fileupload.jsp" id="mf">
<table class="ftbl">
<tr>
<td class="ftd">名前：</td>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<td class="ftd">タイトル：</td>
<td><input type="text" name="title" value="" /></td>
</tr>
<tr>
<td class="ftd">コメント：</td>
<td> 何番へのコメント？:
<sql:query sql="select * from bt_gakusei where rid = 0 order by id desc limit 3;" var="com"/>
<select name="rid">
<option value="">新しいスレッド</option>
<c:forEach var="a" items="${com.rows}" varStatus="jl">
<option value="${a.id}">たいとる:${a.title}へ返信</option>
</c:forEach>
</select><br />
<textarea rows="5" cols="40" name="comment"></textarea></td>
</tr>
<tr>
<td class="ftd">添付File：</td>
<td><input type="file" name="img" value="set" /></td>
</tr>
<tr>
<td class="ftd">削除キー：</td>
<td><input type="password" name="dpass" value="" size="20" maxlength="8" /></td>
</tr>
<tr>
<td class="ftd">書き込み実行：</td>
<td><input type="submit" value="書き込む" /></td>
</tr>
</table>
</form>
<div id="list">
<c:forEach var="i" items="${com.rows}" varStatus="sl">
<ul>
<li> No:<div class="di1">${i.id}</div></li>
<li> 名前:<div class="di1">${i.name}</div></li>
<li> タイトル:<div class="di1">${i.title}</div></li>
<li> コメント:<div class="di1">${i.comment}</div></li>
<li>添付ファイル:<img src="btread.jsp?id=${i.id}" width="100" height="100" /></li>
<li>時間:<div class="di1">${i.cdate}</div></li>
<li> 削除キー:
<form action="del.jsp" method="post">
<input type="text" value="" name="delkey" />
<input type="checkbox" value="${i.id}" name="delid" />
<input type="submit" value="削除実行" />
</form>
</li>
</ul>
<sql:query sql="select * from bt_gakusei where rid = ?;" var="rs1">
<sql:param value="${i.id}" />
</sql:query>
<c:forEach var="j" items="${rs1.rows}">
<div class="com"> コメントID:<span class="di1">${j.id}</span><br />コメント本文:<div class="di1">${j.comment}</div></div>
</c:forEach>
<hr />
</c:forEach>
</div>
</div>
<div id="footer">
<h1>©gakusei</h1>
</div>
</div>
</body>
</html>
---fileupload.jsp
<%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <%@ taglib uri="/tci10006" prefix="gh" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>File</title> </head> <body> <fmt:requestEncoding value="UTF-8" /> <fmt:setLocale value="ja_JP" /> <gh:fileup jdbc="jdbc:postgresql:tci10006" user="tci10006" pass="" db="tci10006" table="bt_gakusei" /> <c:redirect url="index.jsp" /> </body> </html>
---btread.jsp
<%@ page contentType="image/jpeg" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/tci10006" prefix="gh" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<gh:read jdbc="jdbc:postgresql:tci10006" user="tci10006" pass="" db="tci10006" table="bt_gakusei" id="${fid}" />
*終わったら、新バージョンのjarの改良をしますので、もう一度繰り返してください。