------------------- ozUpload.js ------------------
/******************************************************************************
プログレスバー付き画像ファイルアップロード 画像保存とサムネイル保存
（このファイルはUTF8で保存すべし）HTML,css ファイルもUTF8じゃないとだめだと思う
自動的に作成されるファイルアップロード入力領域
+------------------------------------------------------+
|+---- fileInput ------+ |
|+---------------+ +------------------------------+ |
|| progressbar | | + |
|| | | + |
|| output1 | | output2 + |
|| | | + |
|+---------------+ +------------------------------+ |
+------------------------------------------------------+
使い方 ozUpload(uploadid,action,option)
パラメータ
uploadid: 必須 アップロード用inputが表示される領域のID（文字列）
action: 必須 uploadサーバー側CGIURL（文字列）
option:オプション {'オプション名':値, ....}
max_file_size 自然数default:3000 アップロードファイルの最大サイズKbytes
thumbnail_size 自然数default:120 サムネイルの一辺サイズ
max_image_size 自然数default:1200
画像の最大サイズ（これより大きいときはこのサイズに縮小して保存
output1_html ファイル参照の下左側領域に初期表示するHTML
output2_html ファイル参照の下右側領域に初期表示するHTML
postfunc アップロード完了後に実行する関数
postfunc: postfunc1 としたときpostfunc1(json) で定義する
指定しなければoz_postedupload(json)が実行される。
afterfunc postfunc またはデフォルトpostfuncが実行された後実行するFunction
パラメータはpostfuncと同じ afterfunc(json)を定義する。
no_output2 postfuncが指定されていないときoutput2(出力領域右側）へ出力しない true false
default false
img_format アップロードできる画像フォーマット default: 'jpeg,gif,png'
'jpeg,png' と指定すればgifは使えない
'jpeg' , 'jpg' どちらも可
アップロードが完了するとuploadidの先祖であるFormに
hidden属性のInputタグimgpath_xxxとthumbpath_xxxが追加され
その値はそれぞれアップロードされた画像とサムネイルのwwwpathが設定される。
xxxはozUpload()のuploadid
（imgpath_xxxとthumbpath_xxxはアップロードが成功したタイミングでinput hiddenタグが追加されるので、アップロードしないときは存在しない)
使用例
-- htmlヘッダー部 --
<link href="ozUpload.css" rel="stylesheet" type="text/css">
<script src="prototype.js" type="text/javascript"></script>
<script src="ozUpload.js" type="text/javascript"></script>
<script>
//最もシンプルな呼び出し方
//ozUpload('uploadarea','/cgi-bin/upload.cgi');
//アップロード完了時起動Functionを自分で定義する。3番目のパラメータ指定
//その他オプションを指定するときは4番目をハッシュで指定
ozUpload(
'uploadarea',
'/cgi-bin/upload.cgi',
{
postfunc:自分で操作するFunction,
max_file_size:40,
output2_html:'ここに何かを表示する<br>..........'
}
);
</script>
-- body部 --
<form name='xxxx'>
.........
........
<div id='uploadarea'></div>
<input ......>
</form>
*****************************************************************************/
/* 外部からはこの関数をコールすることで機能を実現する */
function ozUpload(uploadid,action,option)
{
if(!ozUploadhash[uploadid]){ozUploadhash[uploadid]={init:false};}
ozUploadhash[uploadid].uploadid=uploadid;
ozUploadhash[uploadid].postfunc=oz_postedupload;
ozUploadhash[uploadid].afterfunc=oz_afterfunc;
oz_cgiurl=action;
for(i=0;i<oz_uploadinitnm.length;i++){
if(option!=undefined && option[oz_uploadinitnm[i][0]]){
ozUploadhash[uploadid][oz_uploadinitnm[i][0]]=option[oz_uploadinitnm[i][0]];
}
}
}
//アップロード完了時実行Function
// ozUpload()のoptionでpostfunc を指定しないときこのFunctionが実行される。
// ユーザーが独自のアップロード完了時実行Functionを定義するときはこのFunctionを参考に
// 独自名で function xxxxx(json){} として作成する。
// ozUpload()のoptionに postfunc:'xxxxx' と指定する。
//
// アップロード完了後サーバーにより以下の各種データがJSON形式で設定されてくる。
// パラメータ json
// json.stat 成功：true 失敗:false
// json.message 失敗したときの理由 （日本語メッセージ）
// json.outputid1 出力欄ID
// json.outputid2 出力欄ID
// json.imgpath 保存した画像のwwwパス
// json.thumbpath サムネイルのwwwパス
// json.imgwidth 保存した画像の横pixcel
// json.imgheight 保存した画像の縦pixcel
// json.thumbwidth サムネイルの横pixcel
// json.thumbheight サムネイルの縦pixcel
// json.shrink 最大一辺より大きいため保存画像は縮小された true false
// json.redundant 画像サイズがサムネイル一辺より
// 小さいためサムネイルと元画像が同じ true false
// json.uploadid アップロードパーツが載るエレメントID
// ozUpload() の第一引数で与えた値
// json.destform このアップロードエレメントが乗っているForm.name
function oz_postedupload(json)
{
if(!json.stat){
$(json.outputid1).innerHTML=json.message;
if(!json.no_output2){$(json.outputid2).innerHTML='';}
}else{
if(json.redundant){
$(json.outputid1).innerHTML=
"<img src='"+json.thumbpath + "' border=0>";
}else{
$(json.outputid1).innerHTML=
"<a href='"+json.imgpath+"' target='_blank'>"+
"<img src='"+json.thumbpath + "' border=0>"+
"</a>";
}
if(!json.no_output2){
$(json.outputid2).innerHTML=
(json.shrink?"大きいため縮小されました<br>":"")+
(json.redundant?"元画像が小さいためサムネイルはありません。":"画像をクリックすると大きい画像サイズウインドウを開きます。")+"<br>"+
'保存画像: W'+json.imgwidth+'pix, H'+json.imgheight+'pix<br>'+
json.imgpath+'<br>'+
'サムネイル: W'+json.thumbwidth+'pix, H'+json.thumbheight+'pix<br>'+
json.thumbpath;
}
}
}
/*
upload完了後最初に実行するFunction
このFunctionはアップロード完了後に自動的にCallされ、次の動作をする。
ファイル選択をenableにする。
プログレスバーを不可視にする。
ファイルアップロード用Element xxxが置いてあるFormに
<input type='hidden' name='imgpath_xxx'>
<input type='hidden' name='thumbpath_xxx'>
このフォームエレメントが存在しない場合にはエレメントを追加する。
値はアップロードした画像のWWWパスが設定される。
*/
function oz_firstfunc(json)
{
$(ozUploadhash[json.uploadid]['fileinputid']).disabled=false;
var progressbardiv='progressbardiv_'+$(json.uploadid).id;
$(progressbardiv).style.display='none';
$(json.outputid1).style.visibility='visible';
var imgpath='imgpath_'+json.uploadid;
var thumbpath='thumbpath_'+json.uploadid;
var destform=document.forms[json.destform];
if(json.stat){
if(destform){
if(!destform.elements[imgpath]){
destform.insert("<input type='hidden' name='"+imgpath+"'>");
}
destform.elements[imgpath].value=json.imgpath;
if(!destform.elements[thumbpath]){
destform.insert("<input type='hidden' name='"+thumbpath+"'>");
}
destform.elements[thumbpath].value=json.thumbpath;
}
}else{
if(destform.elements[imgpath]){destform.elements[imgpath].value='';}
if(destform.elements[thumbpath]){destform.elements[thumbpath].value='';}
}
}
/* dummy */
function oz_afterfunc(json){}
//
function oz_uploadfile(uploadform,uploadid)
{
var upload_area=$(uploadid);
var progressbardiv='progressbardiv_'+upload_area.id;
var progressbarinnerdiv='progressbarinnerdiv_'+upload_area.id;
var progresstext='progresstext_'+upload_area.id;
var oz_retdiv='oz_retdiv_'+upload_area.id;
var myform=$(uploadform);
$(progressbardiv).style.display='block';
$(progressbarinnerdiv).style.width="100%";
$(progresstext).innerHTML='preparing...'
$(oz_retdiv).style.visibility='hidden';
//ファイルアップロードの前にセッションキーとしてのマジックナンバーを同期Ajaxで取得
var myAjax = new Ajax.Request(
oz_cgiurl,
{
method: 'post',
parameters: "cmd=getmagick",
asynchronous: false
}
);
magick_no=myAjax.transport.responseText;
myform.elements['magickno'].value= magick_no;
myform.action=oz_cgiurl+'?'+magick_no;//キャッシュ対策
myform.submit();//targetがiframeなのでsubmit後次の行へすぐ行く
ozUploadhash[uploadid].progress=0;
myform.oz_file1.disabled=true;
oz_progressbar(magick_no,uploadid,myform.name);//プログレスバー表示
}
var counter=0;
function oz_progressbar(magick_no,uploadid,formname)
{
var upload_area=$(uploadid);
var progressbardiv='progressbardiv_'+upload_area.id;
var progressbarinnerdiv='progressbarinnerdiv_'+upload_area.id;
var progresstext='progresstext_'+upload_area.id;
new Ajax.Request(
oz_cgiurl,
{
method: "post",
/* キャッシュ対策のためURLを毎回変えるため日付シリアルを付ける */
parameters: "cmd=progressbar&magickno="+magick_no +"&"+new Date().getTime(),
onSuccess: function(httpObj){
var json = eval(httpObj.responseText);
if(json.stat){
// json.progressには読み込み済み割合数がはいっている
// この非同期Ajaxが後発よりレスポンスが遅いときがある。
// 着順が逆になってprogressが減ったときは表示更新しない
if(ozUploadhash[uploadid].progress<json.progress){
ozUploadhash[uploadid].progress=json.progress;
progressi=parseInt(json.progress);
$(progressbarinnerdiv).style.width=(100-progressi)+"%";
$(progresstext).innerHTML='Loading... '+progressi+"%";
}
/* インターバル0.2秒で自身Functionを再実行 */
setTimeout("oz_progressbar('"+magick_no+"','"+uploadid+"','"+formname+"')", 200);
}else{
$(progressbarinnerdiv).style.width="0%";
$(progresstext).innerHTML="Completed..100%";
}
},
onFailure: function(httpObj){
alert('upload エラー');
}
}
);
}
function oz_init2(hash)
{
var upload_area=$(hash['uploadid']);
var oz_uploaddiv='oz_uploaddiv_'+upload_area.id;
var uploadform='uploadform_'+upload_area.id;
hash['thisform']=uploadform;
hash['fileinputid']='file_'+uploadform;
var iframe_oz='iframe_oz_'+upload_area.id;
$(document.body).insert(
"<div id='"+oz_uploaddiv+"' class='oz_uploaddiv'>"+
"<form id='"+uploadform+"' name='"+uploadform+"'>"+
"<input type='file' name='oz_file1' "+
"id='"+hash['fileinputid']+"' "+
" onchange='oz_uploadfile(""+uploadform+"",""+upload_area.id+"")'>"+
"</form>"+
"</div>"
);
var myform=$(uploadform);
$(document.body).insert("<iframe name='"+iframe_oz+"' style='display:none;'></iframe>");
oz_uploadinitnm.each(
function(val,idx){
if(val[1]!='onlyhash'){
myform.insert({top:"<input type='hidden' name='"+ val[0]+"'>"});
}
}
);
if(upload_area.up("form")){
myform.destform.value=upload_area.up("form").name;
}
var oz_output1='oz_retdiv'+'_'+upload_area.id;
var oz_output2='oz_resultsub'+'_'+upload_area.id;
myform.insert({top:"<input type='hidden' name='oz_output1' value='"+oz_output1+"'>"});
myform.insert({top:"<input type='hidden' name='oz_output2' value='"+oz_output2+"'>"});
myform.insert(
"<div id='progressbarbase_"+upload_area.id+"' class='progressbarbase'>"+
"<div id='progressbardiv_"+upload_area.id+"' class='progressbardiv'>"+
"<div id='progressbarinnerdiv_"+upload_area.id+"' class='progressbarinnerdiv'></div>"+
"<div id='progresstext_"+upload_area.id+"' class='progresstext'></div>"+
"</div>"+
"</div>"+
"<div style='position:relative;'>"+
"<div id='"+oz_output1+"' class='oz_retdiv'></div>"+
"<div id='"+oz_output2+"' class='oz_resultsub'></div>"+
"</div style='clear:left;'>"
);
myform.method='post';
myform.action=oz_cgiurl;
myform.encoding='multipart/form-data';
myform.target=iframe_oz;
var pos=Position.cumulativeOffset(upload_area);
$(oz_uploaddiv).style.top=pos.top+1;
$(oz_uploaddiv).style.left=pos.left+2;
// 以下 option 指定がないときのデフォルト値を設定
$(oz_output1).innerHTML='upload完了後画像サムネイルがここに表示されます。';
//アップ後サムネイルを表示する領域
$(oz_output2).innerHTML='';
//アップ後何がしかを表示する領域
myform.max_file_size.value=3000; //最大ファイルサイズKbytes
myform.max_image_size.value=1200; //画像１辺の長さがこれ以上のときこのサイズにリサイズして保存
myform.thumbnail_size.value=120; //サムネイル１辺の長さ
myform.img_format.value='jpeg,gif,png';
myform.no_output2.value=false;
//デフォルト値設定終わり
//アップロード領域のdiv id を設定
myform.elements['uploadid'].value=upload_area.id;
//
for(i=0;i<oz_uploadinitnm.length;i++){
if(hash[oz_uploadinitnm[i][0]]){
if(oz_uploadinitnm[i][1]=='elem'){
myform.elements[oz_uploadinitnm[i][0]].value=hash[oz_uploadinitnm[i][0]];
}else if(oz_uploadinitnm[i][1]=='html'){
$(eval(oz_uploadinitnm[i][2])).innerHTML=hash[oz_uploadinitnm[i][0]];
}
}
}
$(oz_output1).style.width=myform.thumbnail_size.value;
$(oz_output1).style.height=myform.thumbnail_size.value;
$(oz_output2).style.height=myform.thumbnail_size.value;
}
function oz_initupload()
{
var hash;
for(key in ozUploadhash){
if(!ozUploadhash[key]['init']){
hash=ozUploadhash[key];
hash['init']=true;
oz_init2(hash);
}
}
}
Event.observe(window,'load',oz_initupload);
var ozUploadhash={};
/* RubyCGIのURL ozUpload()のパラメータで設定される
var oz_cgiurl="";
/* ozUpload()のoption Hashの名称についての配列
配列の一要素中の配列について
第一要素 option Hashの名称 <input type='hidden' name='xxx'> のxxxになる。
第二要素 種類 'elem': <input type='hidden' name='xxx'>のvalueに
ozUploadhashの同名のキーの値を代入する。
'html': HTML要素で このとき第三要素が付く。
'onlyhash': ozUploadhash[xxx][xxx]になるだけでElementには作成されない。
第三要素 「種類」がHTMLのとき function oz_initupload()内の
xxx.innerHTML に入れるため xxx変数の変数名evalするため
*/
var oz_uploadinitnm=[
['magickno',''],
['destform',''],
['uploadid',''],
['postfunc','onlyhash'],
['afterfunc','onlyhash'],
['no_output2','elem'],
['max_file_size','elem'],
['thumbnail_size','elem'],
['max_image_size','elem'],
['img_format','elem'],
['output1_html','html','oz_output1'],
['output2_html','html','oz_output2']
];
--------- ozUpload.js おわり -------------
<--- ozUpload.cssの.progressbardivのbackground-image:url(/images/barbar.gif);を保存したディレクトリに調整のこと