Javascriptで簡単に画像をアップロードできるプラグイン「jQuery.upload」

画像やファイルをJavascriptからアップロードするプラグインをご紹介いたします。

jQuery.uploadを使えば、アップロードするための<form>の設置も不要。

最近主流となっているページ切り替えなしのファイルアップロードが可能です。

IEでも問題なく動作するのが大きいです。(本当にWeb制作に携わっているとIEのダメさが身にしみます)

「jQuery.upload.js」のダウンロードについて

下記よりダウンロードできます。

jQuery.upload.js

http://lagoscript.org/jquery/upload

■使い方

ご利用にはjQueryを使用します。

※jQueryはJavascriptのDOM要素を簡単に使用するためのJavascriptライブラリです。

１．jQueryとダウンロードしてきたjQuery.upload.jsを読み込みます。

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.upload.js" type="text/javascript"></script>
 

ちなみにjQueryのダウンロードはこちらから

2.html上にアップロードするためのinput:fileを設置

 <input name="upload_file" type="file" value="" />
 <input id="upload_btn" name="upload" type="button" value="アップロード" />
 

3．イベントを追加

下記のソースをhead内に追加いたします。

<script type="text/javascript">// <!&#91;CDATA&#91;
// jQueryでdocument読み込み完了
jQuery(document).ready(function(){
     // ボタンが押されたとき
     jQuery("#upload_btn").click(function(){
         jQuery('#upload').upload(
            'upload.php',    // 送信先
             {type:'photo'},     // 同時にPOSTするデータ
             function (result) {
                 jQuery("#results").html(result);
             },
             'text'       // 戻り値の種類
         );
     });
 });
// &#93;&#93;></script>
 

アップロードボタンをクリックするとjQuery.uploadが呼び出されます。

jQuery.uploadの引数

jQuery(elm).upload(URL,DATA,CALLBACK,TYPE);

１．URL      ・・・・ 送信先のURL

２．DATA  ・・・・サーバに送信するデータ（配列、もしくはURL形式(“test=1&sample=2″など)）

３．CALLBACK ・・・・送信後に呼び出される関数

４．TYPE ・・・・CALLBACKの引数の形式(‘json’,’text’,’xml’,’html’,’script’)で指定