言語(サーバ側):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>
<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'] . 'にアップロードされたファイルではありません';
}
?>
if ( is_uploaded_file( $_FILES['upload']['tmp_name'] ) ) {
echo $_POST['now'] . 'にアップロードされたファイルです';
} else {
echo $_POST['now'] . 'にアップロードされたファイルではありません';
}
?>