groundwalker.com
画面遷移しないでファイルをアップロードするのは iframe を使うことで実現できる。
HTMLはこんな感じ。upload.html
<html>
<head>
<script type="text/javascript">
<!--
function uploaded(msg) {
document.getElementById('msg').innerHTML=msg;
}
//-->
</script>
<title>upload test</title>
</head>
<body>
何かの編集ページとか
<iframe name="uploader" src="" style="width:0px;height:0px;border:0px;"></iframe>
<form target="uploader" method="POST" action="uploader.php" enctype="multipart/form-data">
<input type="file" name="f"/><br/>
<input type="submit" value="upload"/>
</form>
<div id="msg"></div>
</body>
ファイルアップロードのPHPスクリプトはこんな感じ。uploader.php
<?php
if (isset($_POST)) {
$base_dir='/tmp/';
$f=$_FILES['f'];
if (isset($f) and $f['name']) {
$file=$base_dir.$f;
if (move_uploaded_file($f['tmp_name'],$file)) {
$msg=$f['name'].'をアップロードしました。';
} else {
$msg='アップロードに失敗しました。';
}
} else {
$msg='ファイルが指定されていません。';
}
}
?>
<html><head>
<script type="text/javascript">
<!--
window.onload=function(){
if(window.parent) {
window.parent.uploaded('<? echo $msg ?>');
}
}
//-->
</script>
</head><body></body></html>
iframe の style に display:none; を指定するサンプルコードを見かけるが Safari の場合 display:none; だとファイルアップロードのスクリプトが新しいウインドウで走ってしまうので注意。
参考- ファイルアップロード : ここの例では display:none; を指定しているが上述の通り、指定すると Safari で iframeが認識されなくなってしまう。
- Business chat for groups: Campfire : チャットサービスだが、ファイルをアップロードするコードが参考になる。プログレスバーも実装している