ActiveX 経由で FTP する jQuery プラグイン を書いてみた
更新履歴
- 2011-06-20
- Ver 0.1.1
パスにブランクが含まれてると、FTP に失敗する不具合を修正しました。
Gumblar がはやってるさなかに不謹慎な気もしますが、仕事でちょっと必要だったもので... ActiveX ということで IE でしか使えませんが IE オンリーな会社のイントラアプリや HTA アプリ向けになら使ってもいいかなと...（ダメ？）
ちなみに HTA についてはこちらが詳しいです。
使い方
プラグインの読み込み
jQuery と jQuery.exActiveXFTP.js を読み込みます。
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.exactivexftp.0.1.0.js"></script>
FTP オブジェクトの生成
$.ex.activeXFTP 関数を実行し、FTP オブジェクトを生成します。この時 FTP サーバに対する 接続ユーザ、パスワード、ホスト名（IPアドレス）、サーバ上の保存先パスを指定します。
var XFTP = $.ex.activeXFTP({ user : 'yamada_taro', pass : 'password', host : 'servername', savePath : '/path' });
その他のパラメータとして以下のものがあります。
アップロードファイルの選択
selectFile() メソッドを実行すると、ファイル選択のダイアログが表示されます。ユーザがファイルを選択するとファイルのフルパスが返され、キャンセルした場合はブランクが返されます。
var path = XFTP.selectFile(); if (path && confirm(path + ' をアップロードしますか？')) { //... }
ファイルのアップロード
upload() メソッドでファイルをアップロードできます。引数は、アップロードするファイルのフルパス（必須）、リネームするファイル名（省略可）、アップロード後の callback 関数（省略可）となります。
XFTP.upload(path , newFilename , function(){ //... });
ファイルのダウンロード
download() メソッドでファイルをダウンロードできます。引数は、ダウンロードするファイル名（必須）、リネームするファイル名（省略可）、ダウンロード後の callback 関数（省略可）となります。
XFTP.download(filename , newFilename , function(){ //... });
使用例
以下のような画面の簡単なアプリを作ってみます。
FTP サーバへの接続情報を入力後、"UPLOAD" ボタンをクリックするとファイル選択ダイアログが表示されます。ファイルを選択すると名前が document-x.x.x.doc 形式に変換され、ファイルがアップロードされます。
アップロード後は document-x.x.x.doc の表記がリンクになり、これをクリックするとアップロードしたファイルがダウンロード＆実行されます。
ソースは以下のようになります。
HTML
<body> <dl class="setting"> <dt>USER</dt> <dd><input id="user"/></dd> <dt>PASSWORD</dt> <dd><input id="pass" type="password"/></dd> <dt>HOST</dt> <dd><input id="host"/></dd> <dt>UPLOAD PATH</dt> <dd><input id="path"/></dd> </dl> <h2>Files</h2> <table class="files"> <tr> <td class="doc-jp">システム設計書</td> <td class="doc-id">document-1.0.0.doc</td> <td><button class="upload">UPLOAD</button></td> </tr> <tr> <td class="doc-jp">機能設計書</td> <td class="doc-id">document-2.0.0.doc</td> <td><button class="upload">UPLOAD</button></td> </tr> <tr> <td class="doc-jp">テスト仕様書</td> <td class="doc-id">document-3.0.0.doc</td> <td><button class="upload">UPLOAD</button></td> </tr> <tr> <td class="doc-jp">操作説明書類</td> <td class="doc-id">document-4.0.0.doc</td> <td><button class="upload">UPLOAD</button></td> </tr> </table> </body>
JavaScript
jQuery(function($){ var XFTP; //UPLOAD ボタンがクリックされた時の処理 $('button.upload').click(function(){ //FTP オブジェクトの生成。生成済みの場合はそれを使用 XFTP = XFTP || $.ex.activeXFTP({ user : $('#user').val(), pass : $('#pass').val(), host : $('#host').val(), savePath : $('#path').val() }); //ファイル選択ダイアログを表示。 var path = XFTP.selectFile(); //リネームするファイル名を取得 var tr = $(this).parents('tr'); var file = tr.find('td.doc-id'); //ファイルが選択された場合のみ UPLOAD 確認ダイアログを表示 if (path && confirm(path + ' を ' + file.text() + ' としてアップロードしますか？')) { //アップロードを実行 XFTP.upload(path,file.text(),function(){ //upload後のcallback。必要に応じて Ajax による DB 更新処理なども記述。 //ファイル名をリンク形式に変更 var docId = tr.find('td.doc-id'); docId.html('<a href="javascript:void(0)">'+docId.text()+'</a>'); }); } }); //動的に生成されるダウンロード用リンクに対し live() メソッドでイベントを割り当て $('td.doc-id a').live('click',function(){ //リンクに表示されたファイル名でダウンロード＆実行 XFTP.download($(this).text()); }); });
