トップページへ戻る

準備

画像アップロード用のタグライブラリを作りました。


$cp /home/hanrin/fileup.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

$cp /home/hanrin/commons-io-2.1.jar /home/tci100xxx/public_html/tomcat/WEB-INF/lib
を実行し、必要なjarをWEBINF/libにコピーしておいてください。

このタグライブラリは、テーブルの形が決まっており、画像もJPGだけしかアップロードできません。
この方式を変えたい、というひとは、先生に言ってください。好きな形して、コンパイルします。

1、フォームでファイルをアップロードする

このタグライブラリは、以下のテーブルでしか動作出来ません。

テーブル名は自由で構いませんが、列名は、同じでなければなりません。(卒業制作等で、テーブルの形が決まっている人は、それに合わせて直しますので、言ってください）

create table bt_img(
	id serial primary key,
	filename varchar(100),
	message varchar(400),
	cdate timestamp default now(),
	img bytea
);

grant all on bt_img to tomcat;
grant all on bt_img_id_seq to tomcat;

また、フォームは以下の形式にしてください。name属性値が違うと、データを受け取れません。

とりあえず、name="message"(ファイルの説明)とname="file"(ファイル送信)があれば動作します。

formには、enctype="multipart/form-data"属性が必要です。

これも変えることが出来ますので、必要な人は言ってください。

<form action="fileupload.jsp" method="post" enctype="multipart/form-data" >
   <textarea rows="5" cols="15" name="message"></textarea>
   <input type="file" name="file" /> 
   <input type="submit" value="アップロード" />
</form>

 

２、JSPでのタグの使用

JSPに

<%@ taglib uri="/fileup" prefix="hn" %>

を追加すると使えるようになります。

まず、fileuploadのJSPに以下のように書きます

<hn:fileup jdbc="jdbcのパス" user="ユーザー名" pass="パスワード" db="データベース名" table="テーブル名" />

例：

<hn:fileup jdbc="jdbc:postgresql:hanrin" user="hanrin" pass="" db="hanrin" table="bt_img" />

次に、画像表示用のJSPを書きます。

<hn:read jdbc="jdbcのパス" user="ユーザー名" pass="パスワード" db="データベース名" table="テーブル名" id="画像のID" />

例：

  <hn:read jdbc="jdbc:postgresql:hanrin" user="hanrin" pass="" db="hanrin" table="bt_img" id="${fid}" />

全体を書くと、以下のようになります。

----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" %>
<!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="initial-scale=1.0, user-scalable=no" />
<title>jQuery Mobile</title>
</head>
<body>
<sql:setDataSource dataSource="jdbc/hanrin" />
<fmt:requestEncoding value="UTF-8"/>
<fmt:setLocale value="ja_JP" />
<sql:query sql="select * from bt_img" var="rs"/>
<ul>
<c:forEach var="i" items="${rs.rows}">
<c:if test="${!empty i.id}">
<li data-role="list-divider">ファイルID＝${i.id}&nbsp;&nbsp;ファイル名＝${i.filename}</li>
<li><img src="btread.jsp?id=${i.id}" width="100" height="200" />
   ${i.message}
   </li>
</c:if>
</c:forEach>
</ul>
<form action="fileupload.jsp" method="post" enctype="multipart/form-data" >
<fieldset>
   アップロードしたいファイルを指定してください。<br />
   メッセージ:
   <textarea rows="5" cols="15" name="message"></textarea>
<br />
</fieldset>
<fieldset>
<input type="file" name="file" />
<input type="submit" value="アップロード" />
</fieldset>
</form>
</body>
</html>

---fileupload.jsp

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/fileup" prefix="hn" %>
<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" />
<hn:fileup jdbc="jdbc:postgresql:hanrin" user="hanrin" pass="" db="hanrin" table="bt_img" />
<a href="index.jsp">アップロード処理が終わりました（戻る)</a>
</body>
</html>

---btread.jsp

<%@ page contentType="image/jpeg" trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="/fileup" prefix="hn" %>
<fmt:parseNumber var="fid" value="${param.id}" />
<hn:read jdbc="jdbc:postgresql:hanrin" user="hanrin" pass="" db="hanrin" table="bt_img" id="${fid}" />

問題１

上のようなBlogアプリケーションを

public_html/tomcat/mobile2011/jqMobileFileUp.jsp

に作りなさい。

次に、上のアプリケーションを、以下の例のように、jQuery mobileで書きなさい。

★　例　★

出来たら、投稿の削除をする管理ページを作ってください。このページは、一般ユーザーに見られないように、パスワードで保護して下さい。

配点５０点。テーマを書くと60点。削除、更新を作ったら100点

トップへ戻る