OZの部屋

なんでも日記です

prototype.js + ruby + rmagick でファイルアップロード No2

2011-03-09 16:07:13 | プログラム
-------------------  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>"+
            '保存画像:&nbsp;W'+json.imgwidth+'pix,&nbsp;H'+json.imgheight+'pix<br>'+
            json.imgpath+'<br>'+
            'サムネイル:&nbsp;W'+json.thumbwidth+'pix,&nbsp;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...&nbsp;'+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(&quot;"+uploadform+"&quot;,&quot;"+upload_area.id+"&quot;)'>"+
    "</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;    //画像1辺の長さがこれ以上のときこのサイズにリサイズして保存
    myform.thumbnail_size.value=120;    //サムネイル1辺の長さ
    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 おわり -------------

最新の画像もっと見る

3 コメント

コメント日が  古い順  |   新しい順
dasdf@gmail.com (reppica watches)
2019-12-26 01:03:00
gressbardiv_"+upload_area.id+"' class='progressbardiv'>"+
""+
""+
""+
返信する
hervelegerdress@outlook.com (herve leger bandage dress)
2020-02-24 23:23:58
https://ameblo.jp/legerdresses/entry-12570456437.html
https://is.gd/7qc6zW
https://is.gd/ht6YpV
https://is.gd/aIoD6g
http://bit.ly/313RnJM
http://bit.ly/2uGoBmE
https://ameblo.jp/legerdresses/entry-12570458430.html
https://legerdresses.seesaa.net/article/473309569.html?1580187934
http://bit.ly/37CYmMq
https://tinyurl.com/ufss3kz
https://tinyurl.com/uteu4u5
https://tinyurl.com/rdt499j
https://tinyurl.com/wvs8xqh
https://legerdresses.seesaa.net/article/473309692.html?1580188408
https://is.gd/266C7u
https://tinyurl.com/rfd2rwq
http://bit.do/fqVT6
http://bit.do/fqVUJ
http://bit.do/fqVUU
http://bit.do/fqVVd
https://legerdresses.seesaa.net/article/473309731.html?1580188658
http://blog.udn.com/legerdresses/131610918
https://is.gd/XWRsZ1
https://is.gd/fj408i
https://is.gd/jtHtNx
http://bit.do/fvjHF
https://is.gd/uv3urp
http://bit.ly/3aRKMa1
http://bit.ly/2vxxDTl
http://bit.ly/3aRIQ14
http://bit.ly/2Guawvc
https://tinyurl.com/v6cv89d
https://tinyurl.com/sj3shkr
http://bit.do/fqVVv
http://bit.do/fqVVS
http://bit.do/fqVV8
返信する
Repliche Rolex (Repliche Rolex)
2021-11-29 15:38:20
https://padlet.com/orologimeccanici/qual_e_il_rolex__meno_costoso
https://is.gd/Thg0u4
https://is.gd/BQYNIa
https://is.gd/6gCu5P
https://is.gd/6o1oYm
https://is.gd/CJVsjC
https://is.gd/ja8lNb
https://www.pinterest.com/orologimeccanici/
https://bit.ly/2YSUK9U
https://bit.ly/3DoJCkj
https://bit.ly/3qMkD6S
https://bit.ly/3Fp8KI0
https://bit.ly/3Fp8GIg
https://bit.ly/3HuMaiX
https://www.pinterest.it/pin/928656385633851002/
https://tinyurl.com/ec2zer7w
https://tinyurl.com/5b8fh974
https://tinyurl.com/3uzjz6hx
https://tinyurl.com/4xe3szv2
https://tinyurl.com/2f66wfzx
https://tinyurl.com/fcr4srpb
https://www.pinterest.it/pin/928656385633851020/
http://tiny.cc/vzpluz
http://tiny.cc/wzpluz
http://tiny.cc/xzpluz
http://tiny.cc/zzpluz
http://tiny.cc/00qluz
http://tiny.cc/10qluz
https://www.behance.net/meccaniorologi
https://www.behance.net/gallery/130962201/il-rolex-submariner
https://rebrand.ly/jjqd8z9
https://rebrand.ly/bvfsqow
https://rebrand.ly/nz0bo9s
https://rebrand.ly/d1ijbcr
https://rebrand.ly/jma45kd
https://rebrand.ly/vcuxc6d
返信する