2010年10月09日

jQuery.uploadでファイルアップロード

言語(クライアント側):JavaScript
言語(サーバ側):PHP
ライブラリ:jQuery

jQueryにはuploadというファイルアップロードのためのプラグインがあります。これを使うと、ボタンでsubmitさせなくてもサーバにファイルをアップロードすることができます。

今回は、使い方と使用例を紹介します。

ダウンロードはこちらから。

1. jQuery.uploadメソッド


jQuery.uploadの形式は次のようになっています。
upload(url, data, callback, type)

使い方は、type属性にfileを指定した<input>タグにidを設定して、それをjQueryで呼び出します。

例えば
<input id="upload" type="file" name="upload" enctype="multipart/form-data">

というタグに対して、
$("#upload").upload(...);

というようにメッソドを呼び出します。

気になった点としては、<input>タグの下に別のタグを配置すると、アップロードした瞬間、表示がずれるという現象が起きることです。

2. jQuery.uploadの引数


url
  対応するサーバ側スクリプトのURL。

data
  サーバに送信するデータ。
  josn形式:{'key':'value'}
  GET形式:key1=value1&key2=value2...
  などの形式で指定する。

callback
  アップロード完了後に呼ばれる関数。

type
  サーバからのレスポンスデータの形式。
  'json', 'text', 'xml', 'html', 'script'のどれか。





3. 使用例


ファイルを指定して「アップロード」ボタンを押すと、引数dataで指定した日時が付加されたメッセージがブラウザに表示されるというシンプルなものを実装しました。

3.1 クライアント側
クライアント側のソースは以下のようになります。赤い部分がjQuery.uploadの呼び出しです。
<html>
    <head>
        <title>jQuery.upload+PHP</title>
        <script type="text/javascript" src="../common/js/jquery.js"></script>
        <script type="text/javascript" src="../common/js/jquery.upload.js"></script>
        <script type="text/javascript">
        <!--
        function uploadFile() {
            $('#upload').upload(
                'upload.php',
                {now:'2010/10/08'},
                function (res) {
                    $("#result").html(res);
                },
                'text'
            );

        }
        -->
        </script>
    </head>
    <body>
        <input id="upload" type="file" name="upload" enctype="multipart/form-data"><br>
        <button onclick="uploadFile()">アップロード</button><br>
        <div id="result"></div>
    </body>
</html>

3.2 サーバ側
サーバ側のPHPスクリプト(ファイル名はupload.php)は以下のようになります。
is_uploaded_file関数は指定されたファイルがHTTPのPOSTでアップロードされたのもであればtrueを返し、そうでなければfalseを返します。
<?php
    if ( is_uploaded_file( $_FILES['upload']['tmp_name'] ) ) {
        echo $_POST['now'] . 'にアップロードされたファイルです';
    } else {
        echo $_POST['now'] . 'にアップロードされたファイルではありません';
    }
?>