ExtJS入門39 ファイルをアップロードするフォームフィールド
ExtJSの標準のライブラリではファイルアップロード用のフォームフィールドは用意されていません。ファイルのアップロードフィールドを作成するためには、uxのExt.ux.form.FileUploadFieldを使うことが比較的多いです。今回はこのUXを使ってファイルを送信するフォームパネルのサンプルです。
Ext.ux.form.FileUploadField
フォーム関連の過去の記事はこちらからです。
- ExtJS入門 ExtJSのフォームについて（基本編）
- ExtJS入門32 フォームパネルとフィールド(基本編)
- ExtJS入門33 Columnレイアウトのフォー
- ExtJS入門34 ComboBoxの基本
- ExtJS入門35 Tableレイアウトのフォーム
- ExtJS入門37 サーバーサイドで処理したフォームのエラーメッセージを表示するム
- ExtJS入門38 独自のVTypeを定義してフォームを検証する
PHP
<?php
$target = 'upload/' . $_FILES['my-upload-file']['name'];
@move_uploaded_file($_FILES['my-upload-file']['tmp_name'],$target);
$res = array(
'success' => true
);
if (!file_exists($target)) {
$res = array(
'success' => false,
'msg' => 'ファイルのアップロードに失敗しました。'
);
}
header("Content-Type: text/html; charset=utf-8");
echo json_encode($res);
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ExtJS名古屋勉強会 フォーム ファイルのアップロード</title>
<!--Ext JS CSS-->
<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css" type="text/css" />
<!--Ext JS-->
<script type="text/javascript" src="../js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/ext/ext-all.js"></script>
<script type="text/javascript" src="../js/ext/src/locale/ext-lang-ja.js"></script>
<!--ux fileupload-->
<script type="text/javascript" src="../js/ux/fileuploadfield/FileUploadField.js"></script>
<link rel="stylesheet" type="text/css" href="../js/ux/fileuploadfield/css/fileuploadfield.css"/>
<script type="text/javascript" src="form-fileupload.js"></script>
<style TYPE="text/css">
<!--
.tick {background-image: url(../img/icon/tick.png) !important;}
-->
</style>
</head>
<body>
<div style="width:500px;margin:0 auto;padding:15px;background-color:#D3E1F1;font-size:small;">
<p style="font-weight:bold;padding:3px;margin-bottom:10px;">
Extのファイルのアップロードフォーム<br />
ux.fileUploadField を使ってファイルをアップロードできるフォームを作成します。
</p>
<div id="form"></div>
<br/>
<div id="form2"></div>
<br/>
Java Script：<a href="form-fileupload.js">form-fileupload.js</a><br/>
</div>
</body>
</html>
Java Script:
Ext.onReady(function()
{
var form = new Ext.form.FormPanel({
renderTo:'form',
url:'file-upload.php',
fileUpload: true,
title:'フォームの簡単な紹介',
height:280,
width:500,
bodyStyle:{
padding:'8px'
},
footerStyle:{ //ボタン周りの表示の調整用スタイル
border:'solid 1px #99BBE8',
'border-top':'none'
},
labelWidth:180,
monitorValid:true, //定期的に妥当性のチェックを行いボタンを連動させます。ボタン側でformBindを設定する
defaults:{
anchor:'100%'
},
items:[
{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'ファイルを選択',
fieldLabel: 'ファイルアップロードフィールド',
name: 'my-upload-file',
buttonText: 'ファイルを選択'
},{
xtype:'textfield',
fieldLabel:'キャプション',
name:'caption'
}
],
buttonAlign:'center',
buttons:[
{
text:'送信',
formBind:true,
iconCls:'tick',
handler:function(){
//ファイルを送信してコールバックを設定。
form.getForm().submit({
//リクエスト時にローダーを表示する
waitMsg: 'ファイルを送信中です...',
//リクエスト成功時
success:function(basicForm,action){
if (action.result.success){
form.getForm().reset();
}else{
Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
}
},
//失敗時
failure:function(basicForm,action){
Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
}
});
}
}
]
});
});
uxは都度作者のサイトやExtJSのフォーラムなどで入手する必要があります。
Ext.ux.form.FileUploadFieldはExtJSのライブラリをダウンロードしたときに含まれるexsamplesの中にもあります。
今回は
js/ext
js/ux/fileupload/FileUploadField.js
js/ux/fileupload/css/fileuploadfield.css
というディレクトリ構成になっています。
uxファイルの読み込みはext-all.jsの後、使用される処理の前に行います。
今回はファイルをポスト後にPHP側で処理を行うので、サーバーサイドも所定の位置に設定しておきます。
これで読み込みが正しくできれば準備は完了です。
では早速FileUploadFieldを使ってみます。基本的いままのフィールドと同じやり方で作成します。
formPanelには送信先のURLをurlコンフィグに設定しておきます、またfileUploadコンフィグをtrueにしてファイルを送信するためformPanelを指定します。
次にfileuploadfieldをitemsに設定します。xtypeは’fileuploadfield’です。
var form = new Ext.form.FormPanel({
・・・
url:'file-upload.php',
fileUpload: true,
・・・
items:[
{
xtype: 'fileuploadfield',
id: 'form-file',
emptyText: 'ファイルを選択',
fieldLabel: 'ファイルアップロードフィールド',
name: 'my-upload-file',
buttonText: 'ファイルを選択'
},{
xtype:'textfield',
fieldLabel:'キャプション',
name:'caption'
}
],
・・・・
});
実行結果:
Ext.ux.form.FileUploadField
フォーム送信時のローディングマスク
フィールド自体の設定はこれまでのほかのフォームフィールドと同じです。formPanelのfileUploadをtrueにすることが重要です。
後は送信ボタンをつけてformPanelのurlに指定した場所にPOSTするだけです。送信されるサーバーの方は簡単なサンプルです。適時お好みの処理に変更してください。
ファイルの送信ではページの読み込みは行われません、フォームのsubmit()メソッドの引数にリクエスト成功後のコールバックを指定して。ファイルの送信が完了したら、フォームをクリアして初期状態に戻るようにします。
basicFormのsubmit()メソッドにオブジェクトでコールバックが設定できることは既に説明しました。今回もファイルの送信成功後の処理をsuccessの中で実行します。また接続などのエラーはfailureの中に記述します。今回は成功すればフォームをクリアし、失敗時はポップアップを表示します。
var form = new Ext.form.FormPanel({
items:[
・・・ファイルアップロードフィールド・・・
],
buttonAlign:'center',
buttons:[
{
text:'送信',
formBind:true,
iconCls:'tick',
handler:function(){
//ファイルを送信してコールバックを設定。
form.getForm().submit({
//リクエスト時にローダーを表示する
waitMsg: 'ファイルを送信中です...',
//リクエスト成功時
success:function(basicForm,action){
if (action.result.success){
form.getForm().reset();
}else{
Ext.Msg.alert('エラー','ファイルのアップロードに失敗しました。').setIcon(Ext.Msg.ERROR);
}
},
//失敗時
failure:function(basicForm,action){
Ext.Msg.alert('エラー','サーバーへの接続に失敗しました。').setIcon(Ext.Msg.ERROR);
}
});
}
}
]
});
formの送信後はファイル保存の処理はサーバーサイドで行われます。ファイルを送信するので、これまでの短いテキストのやり取りとは違いリクエストからレスポンスまでの時間が多少気になります。そのためsubmit()メソッドに渡す設定の中のwaitMsgに送信～完了までの間に表示するロードマスクで表示するテキストを設定します。このロードマスクはリクエストが完了後に自動的に消えるので手軽に使用できます。ファイルアップロードなどの処理はサーバーサイドでの処理に時間が駆るので、一般的にロードマスクを表示させるようにしておくのがよいでしょう。
今回のサンプルの注意として,FireFoxでfirerebugを起動したままファイルの送信リクエストを事項すると、レスポンスのJSONが上手く展開できないようです。上手くいかないときは一度Firebugを無効にして試してみてください。
人気の記事
佐竹 裕行
1982年生まれ。滋賀→はこだて→名古屋→大垣→名古屋。
2006年名古屋学芸大学映像メディア学科卒、その後IAMAS卒(Studio2、6期生)。2009年にsus4に入社。学生時代はMax/MSP JitterやGainerばっかり使っていたが、現在社内では主にExtとモバイル開発、動画サービスのバックエンドを担当。知る人ぞ知るアノ鍵の人。
