<< 年齢と日齢 | top | CSSメモ−IE6レイアウト崩れ対策 >>

スポンサーサイト

一定期間更新がないため広告を表示しています

スポンサードリンク | - | | - | - | - | - |

CFメモ−ファイルアップロードと呼び出し・表示

 CFのソースコードサンプルその5です。ここでは画像のアップロードと表示を行います。
 それ以外のところはこれまでと同じ動きなのですが、ごちゃごちゃのソースが変数化によってまとまっていたりしますので、もし参考にして頂けるのであれば最新の記事のものが良いと思います。

 今回からはプログラム部分の記述が増えていくと思うので、ページ丸ごとのソースを記載します。
 また、これまで「番号」だった部分が「項目番号」と「会員番号」になっていますが、これは元々+GTDの再構築のためのソースであったためです。それをブログのメモ用に「番号」として書き換えていたのですが、もう面倒なので元のままで行きます(^^;)


*****************************************************************************************************


【MySQL】Navicatを使用


テーブル設計

テーブル設計
(クリックで拡大します)


テーブル

テーブル結果
(クリックで拡大します)


-----------------------------------------------------------------------------------------------------


【共通】config.cfm

 外部呼び出し用ファイル。


<cfset db_src = "honma_test_local">
<cfset local_path = "C:/ColdFusion8/wwwroot/workspace/schedule/img/">
<cfset server_path = "http://localhost:8500/workspace/schedule/img/">

DB、ローカルの画像保存ディレクトリ(一時保存用)のパス、サーバーの画像保存ディレクトリのパスをそれぞれ変数として定義


-----------------------------------------------------------------------------------------------------


【form】img_upl_form.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">

<cfset todayDate = dateFormat(Now(),"yyyy/mm/dd")>
<cfset timeNow = TimeFormat(Now(),"HH:mm:ss")>

今日の日付をtodayDate、現在時刻をtimeNowという変数として定義

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

<cfform action="img_upl_confirm.cfm" method="post" name="form1" enctype="multipart/form-data">
    項目番号<cfinput type="text" name="recno"><br />
    会員番号<cfinput type="text" name="uid"><br />
    日付:<cfinput type="text" name="sdate" value="#todayDate#" validate="date" mask="9999/99/99" required="yes" message="正しい日付を入力してください。"><br />
    時刻:<cfinput type="text" name="stime" value="#timeNow#" validate="time" mask="99:99:99" required="yes" message="正しい時刻を入力してください。"><br />
    タイトル<cfinput type="text" name="title" required="yes" message="タイトルを入力してください。"><br />
    画像登録<cfinput type="file" name="upimg"><br />
    内容<cfinput type="text" name="body" size="30"><br />
    登録日時<cfinput type="text" name="crtymd" value="#todayDate# #timeNow#" size="30"><br />
    更新日時<cfinput type="text" name="updymd" value="#todayDate# #timeNow#" size="30"><br />
<br />
    <cfinput type="submit" value="OK" name="submit"><br />
    <cfinput type="reset" value="Reset" name="reset"><br />
</cfform>

</body>
</html>
</cfprocessingdirective>


cffile→<input type="file">と同じ。ファイルアップロード用。


画面

formサンプル


-----------------------------------------------------------------------------------------------------


【confirm】img_upl_confirm.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">
   
<cfinclude template="config.cfm">

config.cfmを呼び出し。

<cfif #upimg# neq "">
    <cffile action="upload" filefield="upimg" destination="#local_path#" accept="image/jpeg,image/gif,image/png" nameconflict="overwrite" result="upimg_result" />
</cfif>

cfif→この場合は、「upimgが空でない場合(画像をアップロードしようとしている場合)は次の処理を行う」

cffile
・action→ファイルをアップロードする。
・filefield→ファイル選択時に使用したフィールドの名前。
・destination→アップロード先のディレクトリのパス名。
       この場合は一時保存用のローカルのパス。このページが開かれた時に処理が行われる。
・accept→許可するファイルの種類。ここではjpg、gif、pngを許可。
・nameconflict→アップロードするファイルの名前が、アップロード先のディレクトリ内のファイルと同じ場合に実行するアクション。ここでは上書き。
・result→cffileが実行したアクション・結果を変数化。

 ファイル形式がイメージ以外の場合はエラーメッセージを……と思ったのですが、なかなか上手く行かないので、その辺りはまた後日やってみようと思います。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>
<cfdump var="#upimg_result#">

cfdump→デバッグ。ここでは以降のパラメータ確認のため使用。

<br />
<br />
これでOK?<br />
<br />
<cfoutput>
    項目番号:#recno#<br />
    会員番号:#uid#<br />
    日付:#sdate#<br />
    時刻:#stime#<br />
    タイトル:#title#<br />
<cfif isDefined("upimg_result")>
    画像:<img src = "#server_path##upimg_result.serverFile#"><br />
</cfif>
    内容:#body#<br />
    登録日時:#crtymd#<br />
    更新日時:#updymd#<br />
</cfoutput>

<cfform action="img_upl_entry.cfm" method="post" name="form1">
    <cfinput type="hidden" name="recno" value="#recno#">
    <cfinput type="hidden" name="uid" value="#uid#">
    <cfinput type="hidden" name="sdate" value="#sdate#">
    <cfinput type="hidden" name="stime" value="#stime#">
    <cfinput type="hidden" name="title" value="#title#">
<cfif isDefined("upimg_result")>
    <cfinput type="hidden" name="upimg" value="#upimg_result.clientFile#">
    <cfinput type="hidden" name="upimg_ext" value="#upimg_result.clientFileExt#">
</cfif>
    <cfinput type="hidden" name="body" value="#body#">
    <cfinput type="hidden" name="crtymd" value="#crtymd#">
    <cfinput type="hidden" name="updymd" value="#updymd#">
    <cfinput type="submit" value="OK" name="submit">
</cfform>

cfif
・isDefined→変数の存在を確認する関数。
 ここでは、「画像ファイルが一時保存されている場合は、そのファイル名と拡張子を送信」。

</body>
</html>
</cfprocessingdirective>


画面

confirmサンプル

 ひどいたんぽぽですね。

 突っ込んだら負けです。
 写真があったのですが、なぜかアップロードできなかったため、とりあえず絵です。原因はまたゆっくり探りたいと思います……。


-----------------------------------------------------------------------------------------------------


【entry】img_upl_entry.cfm


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective  suppresswhitespace="yes" pageencoding="utf-8">

<cfinclude template="config.cfm">

<cfset uuid = #createuuid()#>

#createuuid()#→UUIDを作成、変数化

<cfif isDefined("upimg")>
    <cffile action="rename" source="#local_path##upimg#" destination="#uuid#.#upimg_ext#">    
</cfif>

cffile
・rename→ファイルをリネーム
・source→リネームするファイルのパスを指定
・destination→変更先のファイルもしくはディレクトリを指定
 ここでは、ローカルに一時保存されたファイルをリネームしてDBに登録する。
 変数を値に戻して解釈すると、「C:/ColdFusion8/wwwroot/workspace/schedule/img/123.jpgを【作成されたUUID】.jpgにリネームする」。

<cfquery datasource="#db_src#" name="q1">
insert into SCHEDULE
        (recno,uid,sdate,stime,title,image,body,crtymd,updymd,
    <cfif isDefined("upimg")>
        img_name
    </cfif>)
values
        ('#recno#','#uid#','#sdate#','#stime#','#title#','#upimg#','#body#','#crtymd#','#updymd#',
    <cfif isDefined("upimg")>
        '#uuid#.#upimg_ext#'
    </cfif>)
</cfquery>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

登録完了。

</body>
</html>
</cfprocessingdirective>


 書き込み完了。


画面

entryサンプル

テーブル

レコード追加サンプル
(クリックで拡大します)


-----------------------------------------------------------------------------------------------------


【表示】img_upl_test.cfm

 今登録した画像をテスト表示。


<cfcontent type="text/html; charset=utf-8">
<cfscript>
setencoding("form", "utf-8");
setencoding("url", "utf-8");
</cfscript>
<cfprocessingdirective suppresswhitespace="yes" pageencoding="utf-8">

<cfinclude template="config.cfm">

<cfquery datasource="#db_src#" name="q1">
select img_name from SCHEDULE
where recno = '9'
</cfquery>

DB「#db_src#(honma_test)」のテーブル「SCHEDULE」の「recnoが9」のレコードから、フィールド「img_name」の値を取り出す。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
</head>

<body>

<cfoutput>
    <cfif #q1.img_name# neq "">
        <img src="#server_path##q1.img_name#" /><br />
    <cfelse>
        画像がありません。
    </cfif>
</cfoutput>

</body>
</html>
</cfprocessingdirective>

cfelse→cfifタグの直下にある条件を満たさない時に行う処理。「その他の場合」。
 ここでは、「recnoが9のフィールドが空でない場合(画像ファイルがある場合)は画像を表示、そうでない場合は『画像がありません』というメッセージを表示」。


表示(上の表はデバッグ結果)

表示サンプル
くみっち | ColdFusion | 17:32 | comments(0) | trackbacks(0) | - | - |

スポンサーサイト

スポンサードリンク | - | 17:32 | - | - | - | - |
Comment









Trackback
URL:

12
--
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
--
>>
<<
--