« 工人舎 | メイン | 無料マンガ雑誌 コミック・ガンボ「GUMBO」 »

画面遷移なしでファイルアップロードする方法 と Safariの注意点

あとで読む

画面遷移しないでファイルをアップロードするのは 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 : チャットサービスだが、ファイルをアップロードするコードが参考になる。プログレスバーも実装している

Trackbacks

Trackback URL:
http://groundwalker.com/mt/gwtb.cgi/148

« 工人舎 | メイン | 無料マンガ雑誌 コミック・ガンボ「GUMBO」 »

スポンサー

関連ブログ

あわせて読みたい

関連キーワード

Powered by
Movable Type 3.34
track feed
groundwalker

連絡先